@peers-app/peers-ui 0.0.14

package/src/screens/setup-user.tsx

@@ -0,0 +1,367 @@
+import { getPrimaryAssistant, IMessage, IPublicPrivateKeys, isid, loadKeys, Messages, myUserId, newid, newKeys, openMessageWithPublicKey, rpcServerCalls, signMessageWithSecretKey, thisDeviceId, Users } from "@peers-app/peers-sdk";
+import React, { useState } from "react";
+import { Input } from "../components/input";
+import { MarkdownWithMentions } from "../components/markdown-with-mentions";
+import { Tooltip } from "../components/tooltip";
+import { mainContentPath, me, openThread } from "../globals";
+
+async function sendNewUserMessage(userId: string) {
+  const user = await Users().get(userId);
+  if (!user) {
+    throw new Error('user not found');
+  }
+  const primaryAssistant = await getPrimaryAssistant();
+  const message: IMessage = {
+    messageId: newid(),
+    message: [
+      `Hi, ${user.name}! Welcome to Peers! I'm your primary AI assistant.`,
+      "\n\n",
+      "If you have any questions, just ask! I'm here to help.",
+      // `\nRemind Mark to add some Getting-Started tasks that I can work through with you.`,
+    ].join(' '),
+    userId: user.userId,
+    assistantId: primaryAssistant?.assistantId,
+    channelId: user.userId,
+    createdAt: new Date(),
+  }
+  await Messages().insert(message);
+  openThread(message.messageId);
+}
+
+export const SetupUser = () => {
+  const [username, setUsername] = useState('');
+  let [userId, setUserId] = useState('');
+  const [secretKey, setSecretKey] = useState('');
+  const [existingUser, setExistingUser] = useState(false);
+  const [registerAccount, setRegisterAccount] = useState(true);
+  const [showUserKeys, setShowUserKeys] = useState(false);
+
+
+  async function onSubmit(e: React.FormEvent) {
+    e.preventDefault();
+
+    let keys: IPublicPrivateKeys;
+    if (existingUser) {
+      if (!userId || !secretKey) {
+        confirm('Please enter a userId and secret key');
+        return;
+      }
+      if (isid(userId) !== true) {
+        confirm('Invalid userId');
+        return;
+      }
+      try {
+        keys = loadKeys(secretKey);
+        const msg = newid();
+        const msgSigned = signMessageWithSecretKey(msg, keys.secretKey);
+        const msgOpened = openMessageWithPublicKey(msgSigned, keys.publicKey);
+        if (msg !== msgOpened) {
+          throw new Error('signed message does not match');
+        }
+      } catch (e) {
+        confirm('Invalid secret key');
+        return;
+      }
+    } else {
+      keys = newKeys();
+    }
+
+    const _userId = userId || me.userId;
+
+    let _me = await Users().get(_userId);
+    const name = username.trim() || "Unnamed_1";
+    if (!_me) {
+      _me = {
+        userId: _userId,
+        name,
+        publicKey: keys.publicKey,
+        publicBoxKey: keys.publicBoxKey,
+      };
+      await Users().insert(_me);
+    } else {
+      _me.name = name;
+      _me.publicKey = keys.publicKey;
+      _me.publicBoxKey = keys.publicBoxKey;
+      await Users().update(_me);
+    }
+    myUserId(_userId);
+    
+    const result = await rpcServerCalls.setSecretKey(keys.secretKey).catch(err => {
+      confirm('Error setting user id and secret key: ' + String(err).replaceAll('\n', ' '));
+      return err;
+    });
+    if (result) {
+      return;
+    }    
+    // if changing user then use new device id
+    thisDeviceId(newid());
+    if (existingUser) {
+      mainContentPath('profile');
+      setTimeout(() => {
+        mainContentPath('profile');
+        window.location.reload();
+      }, 100);
+    } else {
+      setUserId(_userId);
+      setSecretKey(keys.secretKey);
+      setShowUserKeys(true);
+    }
+  }
+
+  if (showUserKeys) {
+    return <ShowUserKeys userId={userId} secretKey={secretKey} />;
+  }
+
+  return (
+    <div
+      className='container-fluid'
+    >
+      <div
+        className="position-relative"
+        style={{
+          height: '100vh',
+        }}
+      >
+        <div
+          className="position-absolute start-50 translate-middle bg-body-tertiary"
+          style={{
+            width: '400px',
+            padding: '20px',
+            border: '1px solid #ccc',
+            borderRadius: '5px',
+            top: '350px',
+          }}
+        >
+          <h3 className='text-center'>Setup User</h3>
+
+          <form onSubmit={onSubmit}>
+            <label>Display Name</label>
+            <Tooltip 
+              positions={['top', 'bottom', 'right', 'left']}
+              markdownContent="This can be whatever you want it to be.  You can change it any time." 
+            />
+            <input
+              id="display-name"
+              type='text'
+              className='form-control'
+              value={username}
+              onChange={(e) => setUsername(e.target.value)}
+            />
+
+            <div className="mt-2">
+              <label>Existing User</label>
+              <Tooltip 
+                positions={['top', 'bottom',  'right', 'left']}
+                markdownContent="Check this if you have already have an account and need to enter your existing `userId` and `secretKey`." 
+              />
+              &nbsp;
+              <input
+                type="checkbox"
+                checked={existingUser}
+                onChange={(e) => {
+                  const checked = e.target.checked;
+                  setExistingUser(checked);
+                  if (checked) {
+                    setUserId('');
+                    setSecretKey('');
+                  }
+                }}
+              />
+            </div>
+
+            {existingUser && (
+              <>
+                <br />
+                <label>User Id</label>
+                <Tooltip 
+                  positions={['top', 'bottom',  'right', 'left']}
+                  markdownContent="The user id that was generated when you first setup your account." 
+                />
+                <input
+                  id="user-id"
+                  type="text"
+                  className='form-control'
+                  value={userId}
+                  onChange={(e) => setUserId(e.target.value)}
+                  disabled={!existingUser}
+                />
+                <br />
+
+                <label>Secret Key</label>
+                <Tooltip 
+                  positions={['top', 'bottom',  'right', 'left']}
+                  markdownContent="The secret key for the public key that is currently associated with this account." 
+                />
+                <input
+                  id="secret-key"
+                  type='password'
+                  className='form-control'
+                  value={secretKey}
+                  disabled={!existingUser}
+                  onChange={(e) => setSecretKey(e.target.value)}
+                />
+              </>
+            )}
+
+            <div className="mt-2">
+              <label>Sync with Peers</label>
+              <Tooltip 
+                positions={['top', 'bottom',  'right', 'left']}
+                markdownContent={[
+                  "### PLEASE READ",
+                  '\n',
+                  "Leave this checked to register your `userId` and `publicKey` with [https://peers.app](https://peers.app) server.",
+                  "\n\n**No other data is sent to the server.**\n\n",
+                  "This is not required to use Peers but it is required to use the built-in network services.",
+                  "Additionally this will ensure that your `userId` is not used publicly by someone else.",
+                  "\n\n",
+                  "**This is _highly_ recommended** but if your goal is absolute privacy, uncheck this.",
+                  "\n\n",
+                  "If you choose to not do this now, you can still do it later from the settings screen.",
+                ].join(' ')} 
+              />
+              &nbsp;
+              <input
+                type="checkbox"
+                checked={registerAccount}
+                onChange={(e) => setRegisterAccount(e.target.checked)}
+              />
+            </div>
+
+            <button
+              className='btn btn-primary float-end'
+              onClick={e => onSubmit(e)}
+            >
+              Submit
+            </button>
+          </form>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+const ShowUserKeys = (props: { userId: string, secretKey: string }) => {
+  const { userId, secretKey } = props;
+
+  const [secretKeySaved, setSecretKeySaved] = useState(false);
+
+  async function continueToApp() {
+    await sendNewUserMessage(userId);
+    window.location.reload();
+  }
+
+  const secretKeyExplainer = [
+    "**`NEVER SHARE THIS KEY WITH ANYONE!`**",
+    "\n\n",
+    "If this key is compromised another user can permanently take over your account.",
+    "\n\n",
+    "This key is used to:",
+    "\n - Sign messages so that other users can verify they were sent from you.",
+    "\n - Decrypt boxed data that was encrypted with your public box key.",
+    "\n    - This allows other users to send data to you securely through public channels.",
+    "\n - Encrypt your own private data so that only you can decrypt it.",
+    "\n\n",
+    "Unlike a password, this key is never sent to the server and is entirely in your control.",
+    "This is the foundation of your account's security.",
+    "If you lose this key you will lose access to your account.",
+    "If this key is compromised your account will be too and you will be putting any groups you are a part of at risk.",
+    "\n\n",
+    "Since the secret key is never sent to the server, if you lose it you'll lose access to your account.",
+    "It is highly recommend to store these in a password manager like [1Password](https://1password.com).",
+  ].join(' ');
+
+  return (
+    <div
+      className='container-fluid'
+    >
+      <div
+        className="position-relative"
+        style={{
+          height: '100vh',
+        }}
+      >
+        <div
+          className="position-absolute top-50 start-50 translate-middle bg-body-tertiary"
+          style={{
+            width: '600px',
+            padding: '20px',
+            border: '1px solid #ccc',
+            borderRadius: '5px',
+          }}
+        >
+          <h3 className='text-center'>User Created!</h3>
+
+          <small>User Id:</small>
+          <Tooltip markdownContent="This uniquely identifies you to all other users." />
+          <button
+            className='btn btn-secondary-outline'
+            onClick={() => {
+              navigator.clipboard.writeText(userId);
+            }}
+            title="Copy User Id to Clipboard"
+          >
+            <i className="bi bi-copy"></i>
+          </button>
+          <Input
+            value={me.userId}
+            className="form-control mb-3"
+            disabled
+          />
+
+          <small>Secret Key:</small>
+          <Tooltip markdownContent={secretKeyExplainer} />
+          <button
+            className='btn btn-secondary-outline'
+            onClick={() => {
+              navigator.clipboard.writeText(props.secretKey);
+            }}
+            title="Copy Secret Key to Clipboard"
+          >
+            <i className="bi bi-copy"></i>
+          </button>
+          <pre>
+            {secretKey}
+          </pre>
+
+          <small>
+            <MarkdownWithMentions
+              content={[
+                "**`IMPORTANT:`**",
+                "**Copy your User Id and Secret Key to a secure location.**",                
+                "\n\n",
+                "You won't be able to view this key again after you continue.",
+                "\n\n",
+                "It is highly recommended to store these in a password manager like [1Password](https://1password.com).",
+                "\n\n",
+                "Unlike a password, this key is never sent to the server and is entirely in your control.",                
+                "If you lose this key you will lose access to your account and data.", 
+              ].join(' ')}
+            />
+          </small>
+
+
+          <div>
+
+          <label style={{ textDecoration: 'underline' }}>
+            I Have Saved My Secret Key
+          </label> &nbsp;
+          <input
+            type="checkbox"
+            checked={secretKeySaved}
+            onChange={(e) => setSecretKeySaved(e.target.checked)}
+          />
+          &nbsp; &nbsp;
+          <button
+            disabled={!secretKeySaved}
+            className={(secretKeySaved ? 'btn btn-primary' : 'btn btn-secondary') + ' float-end'}
+            onClick={continueToApp}
+          >
+            Continue
+          </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/screens/tools/tool-code.tsx

@@ -0,0 +1,35 @@
+import { computed, IDoc, ITool } from "@peers-app/peers-sdk";
+import React from "react";
+import { MarkdownEditorInline } from "../../components/markdown-editor/editor-inline";
+
+export const ToolCode = (props: { tool: IDoc<ITool> }) => {
+  const { tool } = props;
+
+  let code = tool.qs.code() ?? '';
+  const toolCodeObs = computed({
+    read: () => {
+      if (!code.startsWith('```')) {
+        code = '```javascript\n' + code + '\n```';
+      }
+      return code;
+    },
+    write: (newCode: string) => {
+      code = newCode;
+      if (code.startsWith('```javascript\n')) {
+        code = code.replace('```javascript\n', '');
+        code = code.replace('\n```', '');
+      }
+      tool.qs.code(code);
+    }
+  })
+
+  return (
+    <div>
+      <MarkdownEditorInline
+        value={toolCodeObs as any}
+        hideToolbar={true}
+      />
+    </div>
+  )
+}
+

package/src/screens/tools/tool-details.tsx

@@ -0,0 +1,101 @@
+import React from "react";
+import { Tools } from "@peers-app/peers-sdk";
+import { LoadingIndicator } from "../../components/loading-indicator";
+import { SaveButton } from "../../components/save-button";
+import { ScreenTabBody, Tabs } from "../../components/tabs";
+import { ToolCode } from "./tool-code";
+import { ToolInfo } from "./tool-info";
+import { ToolSchema } from "./tool-schema";
+import { usePromise } from "../../hooks";
+import { Input } from "../../components/input";
+import { updateActiveTabTitle } from "../../tabs-layout/tabs-state";
+
+
+interface IToolDetailsProps {
+  toolId: string;
+}
+
+export const ToolDetails = (props: IToolDetailsProps) => {
+  const tool = usePromise(async () => {
+    const toolData = await Tools().get(props.toolId);
+    if (!toolData) return null;
+    updateActiveTabTitle(toolData.name || "Tool");
+    return Tools().initDoc(toolData);
+  }, undefined, [props.toolId]);
+
+  if (tool === null) {
+    return <div>Tool not found</div>;
+  }
+
+  if (!tool) {
+    return <LoadingIndicator />;
+  }
+
+  function saveChanges() {
+    if (!tool) return;
+    tool.save();
+  }
+
+
+  return (
+    <div className="container-fluid p-3" style={{ overflowY: 'hidden' }}>
+
+      <div className="d-flex">
+        <div>
+          <h4>
+            <i className="bi bi-tools me-2"></i>
+          </h4>
+        </div>
+        <div className="flex-grow-1">
+          <h4>
+            <Input
+              key={tool.toolId}
+              className='border border-0'
+              style={{ width: '100%', outline: 'none', backgroundColor: 'transparent' }}
+              value={tool.qs.name}
+            />
+          </h4>
+        </div>
+        <div>
+          <SaveButton
+            key={tool.toolId}
+            onClick={saveChanges}
+            doc={tool}
+          />
+        </div>
+      </div>
+
+
+      <Tabs
+        key={tool.toolId}
+        tabs={[
+          {
+            name: 'Info', content:
+              <ScreenTabBody>
+                <ToolInfo tool={tool} />
+              </ScreenTabBody>
+          },
+          {
+            name: 'Schema', content:
+              <ScreenTabBody>
+                <ToolSchema tool={tool} />
+              </ScreenTabBody>
+          },
+          {
+            name: 'Code', content:
+              <ScreenTabBody>
+                <ToolCode tool={tool} />
+              </ScreenTabBody>
+          },
+          // {
+          //   name: 'Tests', content:
+          //     <ScreenTabBody>
+          //       <ToolTestList toolId={tool.toolId} />
+          //     </ScreenTabBody>
+          // },
+        ]}
+      />
+
+    </div>
+  )
+}

package/src/screens/tools/tool-info.tsx

@@ -0,0 +1,60 @@
+import { IDoc, ITool, observable } from "@peers-app/peers-sdk";
+import React, { useEffect, useState } from "react";
+import { Checkbox } from "../../components/checkbox";
+import { Input } from "../../components/input";
+import { MarkdownEditorInline } from "../../components/markdown-editor/editor-inline";
+
+export const ToolInfo = (props: { tool: IDoc<ITool> }) => {
+  const { tool } = props;
+
+  const [markdownUsageObs] = useState(() => observable(tool.usageDescription));
+  const [markdownDetailedObs] = useState(() => observable(tool.detailedDescription || ''));
+
+  useEffect(() => {
+    const sub = markdownUsageObs.subscribe(() => {
+      tool.usageDescription = markdownUsageObs();
+    });
+    const sub2 = tool.qs.name.subscribe(() => {
+      tool.name = tool.qs.name().replaceAll(/\s/g, '_').replaceAll(/[^a-zA-Z0-9_-]/g, '');
+    });
+    const sub3 = markdownDetailedObs.subscribe(() => {
+      tool.detailedDescription = markdownDetailedObs();
+    });
+    return () => {
+      sub.dispose();
+      sub2.dispose();
+      sub3.dispose();
+    }
+  }, [tool]);
+
+
+  return (
+    <div>
+      <small>Name:</small>
+      <Input
+        value={tool.qs.name}
+        className="form-control mb-3 p-0 ps-2"
+        placeholder="Tool name"
+        title="Tool name"
+      />
+
+      <div>
+        <label className="form-label small mt-2 me-2">Is Assistant Runner:</label>
+        <Checkbox
+          className="form-check-input mt-2"
+          checked={tool.qs.isAssistantRunner}
+        />
+      </div>
+
+      <small>Usage Description:</small>
+      <MarkdownEditorInline
+        value={markdownUsageObs}
+      />
+      <br />
+      <small>Detailed Description:</small>
+      <MarkdownEditorInline
+        value={markdownDetailedObs}
+      />
+    </div>
+  )
+}

package/src/screens/tools/tool-list.tsx

@@ -0,0 +1,121 @@
+import { FieldType, ICursorIterable, IOSchemaType, ITool, newid, observable, Tools } 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 } from '../../globals';
+import { useObservable } from '../../hooks';
+
+export function ToolList() {
+
+  const [searchTextObs] = useState(() => observable(''));
+  const [searchText] = useObservable(searchTextObs);
+
+  const [cursorObs] = useState(() => observable<ICursorIterable<ITool>>());
+  const [cursorId] = useState(() => observable(newid()));
+
+  async function newCursor() {
+    let cursor: ICursorIterable<ITool>;
+    const _searchText = searchText.trim();
+    if (_searchText) {
+      cursor = await Tools().cursor({ name: { $matchWords: _searchText } }, { sortBy: ['-toolId'] });
+    } else {
+      cursor = await Tools().cursor(undefined, { sortBy: ['-toolId'] });
+    }
+
+    cursorObs(cursor);
+    cursorId(newid());
+    return cursor;
+  }
+
+  useEffect(() => {
+    const sub = searchTextObs.subscribe(() => {
+      cursorObs(undefined);
+      cursorId(newid());
+    });
+    return () => sub.dispose();
+  }, [searchText]);
+
+  async function searchSubmit(evt: React.KeyboardEvent<HTMLInputElement>) {
+    if (evt.key !== "Enter") return;
+    if (!searchText.trim()) return;
+    let toolName = searchText.trim().replace(/\s+/g, '_').replaceAll(/[^a-zA-Z0-9_]/g, '');
+    const tool = await Tools().initRecord({
+      name: toolName,
+      usageDescription: searchText.trim(),
+      detailedDescription: '',
+      inputSchema: { type: IOSchemaType.simple, fields: [{ name: 'input', type: FieldType.string, description: '' }] },
+      outputSchema: { type: IOSchemaType.simple, fields: [{ name: 'output', type: FieldType.string, description: '' }] },      
+    });
+    await Tools().insert(tool);
+    mainContentPath(`tools/${tool.toolId}`);
+  }
+
+  async function loadMore(existingTools: ITool[]): Promise<ITool[]> {
+    let moreMatches: ITool[] = [];
+    let cursor = cursorObs() || await newCursor();
+    for await (const tool of cursor) {
+      if (existingTools.find(w => w.toolId === tool.toolId)) continue;
+      moreMatches.push(tool);
+      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 tool"
+        autoFocus={isDesktop() ? true : false}
+        onKeyUp={evt => searchSubmit(evt)}
+      />
+
+      <div className="peers-list-container">
+        <LazyList
+          key={cursorId()}
+          loadMore={loadMore}
+          scrollThreshold={0.6}          
+          renderItems={(tools) => {
+            return tools.map(tool => {
+              let markdownContent = (tool.usageDescription + '\n\n---\n\n' + (tool.detailedDescription ?? ''));
+              const maxLen = 500;
+              if (markdownContent.length > maxLen) {
+                markdownContent = markdownContent.substring(0, maxLen) + '...';
+              }
+              markdownContent = markdownContent.replace(/\n\n---\n\n$/, '');
+              return (
+                <div
+                  key={tool.toolId}
+                  className='container-fluid pb-4'
+                >
+                  <i className="bi bi-tools"></i>&nbsp;
+                  <a href={`#tools/${tool.toolId}`}>
+                    {tool.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>
+  );
+}