@peers-app/peers-ui 0.0.14

package/src/components/messages/thread-message-list.tsx

@@ -0,0 +1,126 @@
+import { sortBy } from 'lodash';
+import React, { useEffect, useState } from 'react';
+import { IMessage, Messages } from "@peers-app/peers-sdk";
+import { me } from '../../globals';
+import { MessageCompose } from './message-compose';
+import { MessageDisplay } from './message-display';
+import { usePromise } from '../../hooks';
+
+interface IProps {
+  threadId: string
+  effects?: {
+    pushMessage: (message: IMessage) => any,
+  }
+  scrollChanged?: (isBottomInView: boolean) => any,
+}
+
+export const ThreadMessageList = (props: IProps) => {
+  const { threadId: messageParentId } = props;
+
+  const [messages, setMessages] = useState<IMessage[]>([]);
+  const messagesEndRef = React.useRef<HTMLDivElement>(null);
+  const messageParent = usePromise(() => Messages().get(messageParentId), undefined, [messageParentId]);
+
+  function scrollToBottom(behavior: 'instant' | 'smooth', delay = 100) {
+    setTimeout(() => {
+      messagesEndRef.current?.scrollIntoView({ behavior });
+    }, delay);
+  }
+
+  async function loadMessages() {
+    const messages = await Messages().list(
+      { messageParentId },
+      {
+        sortBy: ['createdAt', 'messageId'],
+      }
+    );
+    setMessages(messages);
+    scrollToBottom('instant', 1);
+  }
+
+  // first load
+  useEffect(() => {
+    loadMessages();
+  }, [messageParentId]);
+
+  // reload when messages change
+  useEffect(() => {
+    // subscribe to message changes
+    const sub = Messages().dataChanged.subscribe((evt) => {
+      if (evt.dataObject.messageParentId == messageParentId || evt.dataObject.messageId === messageParentId) {
+        loadMessages();
+      }
+    });
+    return () => {
+      sub.unsubscribe();
+    }
+  }, [messageParentId]);
+
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        props?.scrollChanged?.(entry.isIntersecting);
+      },
+      { threshold: 1.0 }
+    );
+
+    if (messagesEndRef.current) {
+      observer.observe(messagesEndRef.current);
+    }
+
+    return () => {
+      if (messagesEndRef.current) {
+        observer.unobserve(messagesEndRef.current);
+      }
+    };
+  }, []);
+
+
+  const [effects] = useState(() => props.effects || ({} as IProps['effects'])!);
+  effects.pushMessage = (newMessage: IMessage) => {
+    if (messages.find(m => m.messageId === newMessage.messageId)) {
+      return;
+    }
+    let _messages = sortBy([newMessage, ...messages], 'createdAt');
+    setMessages(_messages);
+    if (newMessage.userId === me.userId && !newMessage.assistantId) {
+      scrollToBottom('instant', 1);
+    } else {
+      scrollToBottom('smooth');
+    }
+  }
+
+
+  const sendMessage = (userMessage: IMessage) => {
+    effects.pushMessage(userMessage);
+    Messages().save(userMessage);
+  };
+
+  if (!messageParent) {
+    return false;
+  }
+
+  return (
+    <>
+      {messageParent &&
+        <MessageDisplay message={messageParent} isThreadParent={true} />
+      }
+      <hr />
+
+      {messages.map((message, index) => {
+        return <MessageDisplay key={message.messageId} message={message} messageAbove={messages[index - 1]} />
+      })}
+
+      <div className='p-2'>
+        <MessageCompose
+          channelId={messageParent.channelId!}
+          threadId={messageParentId}
+          onMessageSubmit={sendMessage}
+        />
+      </div>
+
+      <div ref={messagesEndRef} />
+    </>
+  )
+}

package/src/components/messages/thread-view.tsx

@@ -0,0 +1,214 @@
+import { Subscription } from "@peers-app/peers-sdk";
+import { useObservable } from "../../hooks";
+import React, { useEffect, useState } from 'react';
+import { newid, IMessage, Messages } from "@peers-app/peers-sdk";
+import { me, openThread, openThreads, threadViewOpen } from '../../globals';
+import { MessageCompose, getContentPersistenceValue } from './message-compose';
+import { MessageDisplay } from './message-display';
+import { ThreadMessageList } from './thread-message-list';
+import { MarkdownWithMentions } from '../markdown-with-mentions';
+
+function closeThread(thread: string | IMessage) {
+  if (typeof thread === 'object') {
+    // delete the draft
+    getContentPersistenceValue(thread.channelId, thread.messageId)('');
+    thread = thread.messageId;
+  }
+  openThreads(openThreads().filter(t => (typeof t === 'string' && t !== thread) || (typeof t === 'object' && t.messageId !== thread)));
+  if (openThreads().length === 0) {
+    startNewThread();
+  }
+}
+
+export function startNewThread() {
+  const threadParent = Messages().initRecord({
+    messageId: newid(),
+    userId: me.userId,
+    channelId: me.userId,
+    message: '',
+  });
+  openThread(threadParent);
+}
+
+export interface IThreadContainerProps {
+  closeThreadBtn?: React.ReactNode
+}
+
+export const ThreadContainer = (props: IThreadContainerProps) => {
+
+  const [[thread]] = useObservable(openThreads);
+
+  if (!thread) {
+    setTimeout(startNewThread, 0);
+    return false;
+  }
+
+  return (
+    <div className="thread-container">
+      <div 
+        className='sticky-top container-fluid border shadow-sm thread-header'
+        style={{ height: '50px' }}
+      >
+        <div className='d-flex'>
+          <div>
+            <button
+              className="btn fs-4"
+              onClick={startNewThread}
+            >
+              <i className="bi bi-plus-lg"></i>
+            </button>
+          </div>
+          <div className='flex-grow-1'>
+            <div className='pt-1'>
+              <OpenThreads />
+            </div>
+          </div>
+          <div>
+            <button className="btn fs-4" onClick={() => {
+              let currentThreadId = openThreads()[0];
+              closeThread(currentThreadId);
+            }}>
+              <i className="bi bi-x-lg"></i>
+            </button>
+
+            {props.closeThreadBtn === undefined && (              
+              <button className="btn fs-4" onClick={() => threadViewOpen(false)}>
+                <i className="bi bi-box-arrow-in-up-right"></i>
+              </button>
+            )}
+            {!!props.closeThreadBtn && props.closeThreadBtn}
+          </div>
+        </div>
+
+      </div>
+
+
+      {thread && typeof thread === 'string' &&
+        <ThreadMessageList
+          threadId={thread}
+        />
+      }
+
+      {thread && typeof thread !== 'string' &&
+        <NewThreadView
+          message={thread}
+        />
+      }
+    </div>
+  );
+};
+
+const NewThreadView = (props: { message: IMessage }) => {
+  const message = Messages().initDoc(props.message);
+
+  // TODO let the user set the channel
+  message.channelId = me.userId;
+
+  return (
+    <div>
+      <p className='p-2 fs-4 text-center'>
+        New Thread
+      </p>
+
+      <div className='p-2'>
+        <MessageCompose
+          channelId={message.channelId}
+          threadId={message.messageId}
+          onMessageSubmit={async (messageData) => {
+            message.message = messageData.message;
+            message.createdAt = new Date();
+            message.userId = me.userId;
+            await message.save();
+            const threadsWithoutDraft = openThreads().filter(t => !(typeof t === 'object' && t.messageId === message.messageId));
+            openThreads([message.messageId, ...threadsWithoutDraft]);
+            threadViewOpen(true);
+          }}
+        />
+      </div>
+    </div>
+  );
+}
+
+const OpenThreads = () => {
+  const [threads] = useObservable(openThreads);
+
+  return (
+    <div className="dropdown">
+      <button className="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+        Open Threads
+      </button>
+      <ul className="dropdown-menu" style={{ maxHeight: '70vh', overflowY: 'auto', minWidth: '90%' }}>
+        {threads.map(thread => {
+          let threadId = '';
+          if (typeof thread === 'object') {
+            threadId = thread.messageId;
+          } else {
+            threadId = thread;
+          }
+          return (
+            <OpenThreadsMenuItem key={threadId} thread={thread} />
+          )
+        })}
+      </ul>
+    </div>
+  );
+}
+
+const OpenThreadsMenuItem = (props: { thread: string | IMessage }) => {
+  const { thread } = props;
+  const [menuText, setMenuText] = useState('loading...');
+  const [message, setMessage] = useState<IMessage | undefined>();
+  const isDraft = typeof thread !== 'string';
+
+
+  useEffect(() => {
+    let sub: Subscription | undefined = undefined;
+    let disposed = false;
+    (async () => {
+      if (typeof thread === 'string') {
+        const message = await Messages().get(thread);
+        if (disposed) return;
+        setMenuText(message?.message ?? `Thread ${thread} not found`);
+        setMessage(message);
+      } else {
+        setMessage(thread);
+        const pVar = getContentPersistenceValue(thread.channelId, thread.messageId);
+        await pVar.loadingPromise;
+        if (disposed) return;
+        setMenuText(pVar() || 'New Thread');
+        sub = pVar.subscribe(() => {
+          setMenuText(pVar() || 'New Thread')
+        });
+      }
+    })();
+    return () => {
+      sub?.dispose();
+    }
+  }, [thread]);
+
+  function _closeThread(evt: React.MouseEvent<HTMLButtonElement, MouseEvent>) {
+    evt.preventDefault();
+    evt.stopPropagation();
+    closeThread(thread);
+  }
+
+  return (
+    <li>
+      <div className='border rounded m-2 mb-3' onClick={() => openThread(thread)}>
+        {!message && 'loading...'}
+        {message && !isDraft && (
+          <div style={{ position: 'relative' }}>
+            <button className='btn-close' style={{ position: 'absolute', right: 8, top: -10, fontSize: '.7em' }} onClick={_closeThread} />
+            <MessageDisplay message={message} isThreadParent />
+          </div>
+        )}
+        {message && isDraft &&
+          <div className='p-1'>
+            <MarkdownWithMentions content={'DRAFT - ' + menuText} />
+          </div>
+        }
+      </div>
+    </li>
+  )
+
+}

package/src/components/off-canvas.tsx

@@ -0,0 +1,83 @@
+import React, { useEffect, useRef } from 'react';
+import { Offcanvas } from 'bootstrap';
+
+interface IProps {
+  id: string
+  children: any
+  position: 'left' | 'right' | 'top' | 'bottom'
+  keepOpen?: boolean
+  dataBackdrop?: boolean
+  effects?: { 
+    hide: (() => any)
+  }
+}
+
+// function removeExtraFadeFromOffcanvas(canvasId: string) {
+//   const offcanvas = document.getElementById(canvasId);
+//   offcanvas?.addEventListener('shown.bs.offcanvas', event => {
+//     let fade = document.getElementsByClassName('offcanvas-backdrop fade show');
+//     for (let i = 0; i < fade.length; i++) {
+//       if (fade.length > 1) {
+//         fade[i].remove();
+//       }
+//     }
+//   });
+// }
+
+// function preventMultipleOffcanvasFades(canvasId: string) {
+//   const offcanvas = document.getElementById(canvasId);
+//   offcanvas?.addEventListener('show.bs.offcanvas', function () {
+//     const backdrops = document.querySelectorAll('.offcanvas-backdrop');
+//     if (backdrops.length > 1) {
+//       for (let i = 1; i < backdrops.length; i++) {
+//         backdrops[i].remove();
+//       }
+//     }
+//   });
+// }
+
+export const OffCanvas = (props: IProps) => {
+  console.log('OffCanvas');
+  const { id, position, keepOpen, effects } = props;
+  
+  const computedProps: any = {};
+  if (keepOpen) {
+    computedProps['data-bs-scroll'] = "true";
+    computedProps['data-bs-backdrop'] = "false";
+  }
+
+  if (props.dataBackdrop !== undefined) {
+    computedProps['data-bs-backdrop'] = String(props.dataBackdrop);
+  }
+
+  const offCanvasPosition = position == 'left' ? 'start'
+    : position == 'right' ? 'end' : position;
+
+  const offCanvasRef = useRef();
+  if (effects) {
+    effects.hide = () => {
+      if (offCanvasRef.current) {
+        let offCanvas = Offcanvas.getInstance(offCanvasRef.current);
+        offCanvas?.hide();
+      }
+    }
+  }
+
+  useEffect(() => {
+    // removeExtraFadeFromOffcanvas(id);
+    // preventMultipleOffcanvasFades(id);
+  }, [offCanvasRef, offCanvasRef.current]);
+
+  return (
+    <div
+      id={id}
+      ref={offCanvasRef}
+      tabIndex={-1} 
+      className={`offcanvas offcanvas-${offCanvasPosition} ${keepOpen ? 'show' : ''}`} 
+      style={{ width: "300px", visibility: keepOpen ? 'visible': '' }}
+      {...computedProps}
+    >
+      {props.children}
+    </div>
+  )
+}

package/src/components/router.tsx

@@ -0,0 +1,224 @@
+import React from "react";
+import * as globals from "../globals";
+import { AssistantDetails } from "../screens/assistants/assistant-details";
+import { AssistantList } from "../screens/assistants/assistant-list";
+import { Profile } from "../screens/profile";
+// import { TaskDetails } from "../screens/tasks/task-details";
+// import { TaskList } from "../screens/tasks/task-list";
+import { ToolDetails } from "../screens/tools/tool-details";
+import { ToolList } from "../screens/tools/tool-list";
+import { ToolTestDetails } from "../screens/tools/tool-test-details";
+import { WorkflowDetails } from "../screens/workflows/workflow-details";
+import { WorkflowList } from "../screens/workflows/workflow-list";
+import { ChannelMessages } from "./messages/channel-view";
+import { PeerEventList } from "../screens/events/event-list";
+import { PeerEventDetails } from "../screens/events/event-details";
+import { SettingsPage } from "../screens/settings/settings-page";
+import { PackageDetails } from "../screens/packages/package-details";
+import { PackageList } from "../screens/packages/package-list";
+import { PackageNewLocal } from "../screens/packages/package-new-local";
+import { VariableList } from "../screens/variables/variable-list";
+import { VariableDetails } from "../screens/variables/variable-details";
+import { KnowledgeFrameList } from "../screens/knowledge/knowledge-frame-list";
+import { KnowledgeFrameDetails } from "../screens/knowledge/knowledge-frame-details";
+import { PeerTypeLists } from "../screens/peer-types/peer-type-list";
+import { PeerTypeDetails } from "../screens/peer-types/peer-type-details";
+import { PredicateList } from "../screens/predicates/predicate-list";
+import { PredicateDetails } from "../screens/predicates/predicate-details";
+import { KnowledgeValueList } from "../screens/knowledge/knowledge-value-list";
+import { KnowledgeValueDetails } from "../screens/knowledge/knowledge-value-details";
+import { UIRouter } from "../ui-router/ui-loader";
+import { useObservable } from "../hooks";
+import { ThreadMessageList } from "./messages/thread-message-list";
+import { GlobalSearch } from "../screens/search/global-search";
+import "../screens/groups";
+import "../screens/contacts";
+
+
+export function Router({ path: providedPath }: { path?: string } = {}) {
+  try {
+    // Use provided path or fall back to global mainContentPath
+    const [globalPath] = useObservable(globals.mainContentPath);
+    let path = providedPath ?? globalPath;
+    const originalPath = path;
+    path = path.toLowerCase().trim();
+    path = path.split('?')[0]; // remove query string
+
+    // remove leading '/'
+    if (path.startsWith('/')) {
+      path = path.substring(1);
+    }
+    // remove trailing '/'
+    if (path.endsWith('/')) {
+      path = path.substring(0, path.length - 1);
+    }
+
+    if (path === 'search') {
+      return <GlobalSearch />;
+    }
+    if (path === 'settings') {
+      return <SettingsPage />;
+    }
+    if (path === 'profile') {
+      return <Profile />;
+    }
+
+    const ui = UIRouter({ path, props: {}, uiCategory: 'screen' });
+    if (ui) {
+      return ui;
+    }
+
+    if (path === 'threads' || path === '') {
+      return <ChannelMessages />;
+    }
+
+    if (path.match(/^channel\//)) {
+      const parts = path.split('/');
+      parts.shift();
+      const channelId = parts[0];
+      // todo add additional params as props if they exist
+      return <ChannelMessages channelId={channelId} />;
+    }
+
+    if (path === 'assistants') {
+      return <AssistantList />;
+    }
+    if (path.match(/^assistants\//)) {
+      const parts = path.split('/');
+      parts.shift();
+      const id = parts[0];
+      return <AssistantDetails assistantId={id} />;
+    }
+
+    // if (path === 'tasks') {
+    //   return <TaskList />;
+    // }
+    // if (path.match(/^tasks\//)) {
+    //   const parts = path.split('/');
+    //   parts.shift();
+    //   const taskId = parts[0];
+    //   return <TaskDetails taskId={taskId} />;
+    // }
+
+    if (path === 'workflows') {
+      return <WorkflowList />;
+    }
+    if (path.match(/^workflows\//)) {
+      const parts = path.split('/');
+      parts.shift();
+      const workflowId = parts[0];
+      return <WorkflowDetails workflowId={workflowId} />;
+    }
+
+    if (path === 'tools') {
+      return <ToolList />;
+    }
+    if (path.match(/^tools\/tests\//)) {
+      const parts = path.split('/');
+      parts.shift();
+      parts.shift();
+      const toolTestId = parts[0];
+      return <ToolTestDetails toolTestId={toolTestId} />;
+    }
+    if (path.match(/^tools\//)) {
+      const parts = path.split('/');
+      parts.shift();
+      const toolId = parts[0];
+      return <ToolDetails toolId={toolId} />;
+    }
+
+    if (path === 'events') {
+      return <PeerEventList />;
+    }
+    if (path.match(/^events\//)) {
+      const parts = path.split('/');
+      parts.shift();
+      const id = parts[0];
+      return <PeerEventDetails peerEventTypeId={id} />;
+    }
+
+    if (path === 'packages') {
+      return <PackageList />;
+    }
+    if (path.match(/^packages\//)) {
+      const parts = path.split('/');
+      parts.shift();
+      const id = parts[0];
+      if (id.toLowerCase() === 'newlocal') {
+        return <PackageNewLocal />;
+      }
+      return <PackageDetails packageId={id} />;
+    }
+
+    if (path === 'variables') {
+      return <VariableList />;
+    }
+    if (path.match(/^variables\//)) {
+      const parts = path.split('/');
+      parts.shift();
+      const id = parts[0];
+      return <VariableDetails persistentVarId={id} />;
+    }
+
+    if (path === 'knowledge-values') {
+      return <KnowledgeValueList />;
+    }
+    if (path.match(/^knowledge-values\/([a-zA-Z0-9]{25})/)) {
+      const parts = path.split('/');
+      parts.shift();
+      const id = parts[0];
+      return <KnowledgeValueDetails knowledgeValueId={id} />;
+    }
+
+    if (path === 'knowledge-frames') {
+      return <KnowledgeFrameList />;
+    }
+    if (path.match(/^knowledge-frames\//)) {
+      const parts = path.split('/');
+      parts.shift();
+      const id = parts[0];
+      return <KnowledgeFrameDetails knowledgeFrameId={id} />;
+    }
+
+    if (path === 'peer-types') {
+      return <PeerTypeLists />;
+    }
+    if (path.match(/^peer-types\//)) {
+      const parts = path.split('/');
+      parts.shift();
+      const id = parts[0];
+      return <PeerTypeDetails peerTypeId={id} />;
+    }
+
+    if (path === 'predicates') {
+      return <PredicateList />;
+    }
+    if (path.match(/^predicates\//)) {
+      const parts = path.split('/');
+      parts.shift();
+      const id = parts[0];
+      return <PredicateDetails predicateId={id} />;
+    }
+
+    if (path.match(/^threads\//)) {
+      const parts = path.split('/');
+      parts.shift();
+      const threadId = parts[0];
+      return <ThreadMessageList threadId={threadId} />;
+    }
+
+    throw new Error('Unrecognized route: ' + originalPath);
+
+  } catch (err) {
+    return (
+      <div className="p-3">
+        <a href='#threads'>Home</a>
+        <h3>Error loading route</h3>
+        <pre>
+          route: {globals.mainContentPath() + '\n'}
+          {String(err)}
+        </pre>
+      </div>
+    )
+  }
+}