@peers-app/peers-ui 0.0.14

package/src/mention-configs.ts

@@ -0,0 +1,166 @@
+import { Assistants, IMentionData, PeerEventTypes, PeerTypes, Predicates, rpcClientCalls, Tools, Users, Workflows } from "@peers-app/peers-sdk";
+// import { MENTIONS_MAX_RESULTS } from "../client/components/markdown-editor/mentions-plugin";
+
+const MENTIONS_MAX_RESULTS = 10;
+
+export interface IMentionConfig {
+  iconClass: string;
+  styleClass?: string;
+  kind: string;
+  query: (text: string) => Promise<IMentionData[]>;
+  getById: (id: string) => Promise<IMentionData | undefined>;
+  picture?: (data: IMentionData) => JSX.Element;
+  onClick?: ((data: IMentionData) => void);
+}
+
+export const toolMentionConfig: IMentionConfig = {
+  kind: 'tool',
+  iconClass: 'bi bi-tools',
+  styleClass: 'mention-tool',
+  query: async (search: string) => {
+    const results = await Tools().list({ name: { $matchWords: search } }, { pageSize: MENTIONS_MAX_RESULTS });
+    return results.map(p => ({
+      kind: 'tool',
+      id: p.toolId,
+      name: p.name
+    }));
+  },
+  getById: id => Tools().get(id).then(item => item && {
+    kind: 'tool',
+    id: item.toolId,
+    name: item.name
+  })
+};
+
+export const userMentionConfig: IMentionConfig = {
+  kind: 'user',
+  iconClass: 'bi-person-fill',
+  styleClass: 'mention-user',
+  query: async (search: string) => {
+    return Users().list({ name: { $matchWords: search } }, { pageSize: MENTIONS_MAX_RESULTS })
+      .then((users) => users.map((user) => ({
+        kind: 'user',
+        id: user.userId,
+        name: user.name,
+      })));
+  },
+  getById: id => Users().get(id).then(item => item && {
+    kind: 'user',
+    id: item.userId,
+    name: item.name
+  }),
+};
+
+export const assistantMentionConfig: IMentionConfig = {
+  kind: 'assistant',
+  iconClass: 'bi bi-person-fill-gear',
+  styleClass: 'mention-assistant',
+  query: async (search: string) => {
+    return Assistants().list({ name: { $matchWords: search } }, { pageSize: MENTIONS_MAX_RESULTS })
+      .then((assistants) => assistants.map((assistant) => ({
+        kind: 'assistant' as const,
+        id: assistant.assistantId,
+        name: assistant.name,
+      })));
+  },
+  getById: id => Assistants().get(id).then(item => item && {
+    kind: 'assistant',
+    id: item.assistantId,
+    name: item.name
+  }),
+};
+
+export const workflowMentionConfig: IMentionConfig = {
+  kind: 'workflow',
+  iconClass: 'bi bi-database-fill-gear',
+  styleClass: 'mention-workflow',
+  query: async (search: string) => {
+    return Workflows().list({ name: { $matchWords: search } }, { pageSize: MENTIONS_MAX_RESULTS })
+      .then((workflows) => workflows.map((workflow) => ({
+        kind: 'workflow' as const,
+        id: workflow.workflowId,
+        name: workflow.name,
+      })));
+  },
+  getById: id => Workflows().get(id).then(item => item && {
+    kind: 'workflow',
+    id: item.workflowId,
+    name: item.name
+  }),
+};
+
+export const peerEventTypeMentionConfig: IMentionConfig = {
+  kind: 'event',
+  iconClass: 'bi bi-lightning-charge-fill',
+  styleClass: 'mention-event',
+  query: async (search: string) => {
+    return PeerEventTypes().list({ name: { $matchWords: search } }, { pageSize: MENTIONS_MAX_RESULTS })
+    .then((events) => events.map((event) => ({
+      kind: 'event' as const,
+      id: event.peerEventTypeId,
+      name: event.name,
+    })));
+  },
+  getById: id => PeerEventTypes().get(id).then(item => item && {
+    kind: 'event',
+    id: item.peerEventTypeId,
+    name: item.name
+  }),
+};
+
+export const predicateMentionConfig: IMentionConfig = {
+  kind: 'predicate',
+  iconClass: 'bi bi-node-plus-fill',
+  query: async (search: string) => {
+    const results = await Predicates().list({ name: { $matchWords: search } }, { pageSize: MENTIONS_MAX_RESULTS });
+    return results.map(p => ({
+      kind: 'predicate',
+      id: p.predicateId,
+      name: p.name
+    }));
+  },
+  getById: id => Predicates().get(id).then(item => item && {
+    kind: 'predicate',
+    id: item.predicateId,
+    name: item.name
+  }),
+};
+
+export const valueTypeMentionConfig: IMentionConfig = {
+  kind: 'type',
+  iconClass: 'bi bi-code-square',
+  query: async (search: string) => {
+    const results = await PeerTypes().list({ name: { $matchWords: search } }, { pageSize: MENTIONS_MAX_RESULTS });
+    return results.map(item => ({
+      kind: 'type',
+      id: item.peerTypeId,
+      name: item.name
+    }));
+  },
+  getById: id => PeerTypes().get(id).then(item => item && {
+    kind: 'type',
+    id: item.peerTypeId,
+    name: item.name
+  }),
+  onClick(data) {
+    rpcClientCalls.setClientPath(`value-types/${data.id}`);
+  },
+};
+
+// Tasks().list({ title: { $matchWords: mentionString }, completeDT: { $exists: searchCompletedTasks } }, { pageSize: MAX_RESULTS })
+//   .then((tasks) => tasks.map((task) => ({
+//     kind: 'task' as const,
+//     id: task.taskId,
+//     name: task.title,
+//   }))),
+// picture = <i className="bi bi-list-task pe-1" />;
+
+export const mentionConfigs = [
+  toolMentionConfig,
+  userMentionConfig,
+  assistantMentionConfig,
+  workflowMentionConfig,
+  peerEventTypeMentionConfig,
+  predicateMentionConfig,
+  valueTypeMentionConfig,
+];

package/src/screens/assistants/assistant-config.tsx

@@ -0,0 +1,80 @@
+import { IAssistant, IDoc, IOSchemaType, Observable, Tools } from "@peers-app/peers-sdk";
+import React from "react";
+import { IOSchemaValues } from "../../components/io-schema-values";
+import { LoadingIndicator } from "../../components/loading-indicator";
+import { useObservable, usePromise } from "../../hooks";
+
+export const AssistantConfig = (props: { assistant: IDoc<IAssistant> }) => {
+  const { assistant } = props;
+
+  const assistantRunnerTool = usePromise(async () => {
+    return await Tools().get(assistant.assistantRunnerToolId);
+  });
+
+  if (assistantRunnerTool === undefined) {
+    return <LoadingIndicator />;
+  }
+
+  if (assistantRunnerTool === null) {
+    return (
+      <div>  
+        <div className='mt-2'>
+          <small>Assistant Runner Tool:</small>
+          <AssistantRunnersDropdown selectedToolId={assistant.qs.assistantRunnerToolId} />
+        </div>
+      </div>
+    );
+  }
+
+  assistantRunnerTool.configSchema = assistantRunnerTool.configSchema ?? { 
+    type: IOSchemaType.complex,
+    fields: []
+  };
+
+  return (
+    <div>
+
+      <div className='mt-2'>
+        <small>Assistant Runner Tool:</small>
+        <AssistantRunnersDropdown selectedToolId={assistant.qs.assistantRunnerToolId} />
+      </div>
+
+      <IOSchemaValues ioSchema={assistantRunnerTool.configSchema} values={assistant.assistantRunnerConfig} q={assistant.q} />
+
+    </div>
+  );
+};
+
+
+const AssistantRunnersDropdown = (props: { selectedToolId: Observable<string> }) => {
+  
+  const [selectedToolId] = useObservable(props.selectedToolId);
+  
+  const modelTools = usePromise(async () => {
+    const modelTools = await Tools().list({ isAssistantRunner: true });
+    return modelTools;
+  });
+
+  if (!modelTools) {
+    return <LoadingIndicator />;
+  }
+
+  return (
+    <div className="dropdown">
+      <button className="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+        {modelTools.find(tool => tool.toolId === selectedToolId)?.name ?? 'Select Tool'}
+      </button>
+      <ul className="dropdown-menu">
+        {modelTools.map(tool => {
+          return (
+            <li key={tool.toolId} onClick={() => props.selectedToolId(tool.toolId)}>
+              {/* <button className="dropdown-item" type="button">Action</button> */}
+              {/* <MarkdownWithMentions content={tool.name} /> */}
+              <span className="dropdown-item">{tool.name}</span>
+            </li>
+          )
+        })}
+      </ul>
+    </div>
+  );
+}

package/src/screens/assistants/assistant-details.tsx

@@ -0,0 +1,77 @@
+import { Assistants, defaultAssistantId, getPrimaryAssistant, observable } from "@peers-app/peers-sdk";
+import React, { useState } from 'react';
+import { Input } from '../../components/input';
+import { LoadingIndicator } from '../../components/loading-indicator';
+import { SaveButton } from '../../components/save-button';
+import { Tabs } from '../../components/tabs';
+import { usePromise } from '../../hooks';
+import { updateActiveTabTitle } from '../../tabs-layout/tabs-state';
+import { AssistantConfig } from './assistant-config';
+import { AssistantInfo } from './assistant-info';
+import { AssistantTools } from './assistant-tools';
+
+
+export const AssistantDetails = (props: { assistantId: string }) => {
+
+  const [isPrimaryAssistant] = useState(() => observable(false));
+
+  const assistant = usePromise((async () => {
+    const assistant = await Assistants().get(props.assistantId);
+    if (!assistant) {
+      return null;
+    }  
+    const primaryAssistantId = (await getPrimaryAssistant()).assistantId
+      || defaultAssistantId;
+    isPrimaryAssistant(assistant.assistantId === primaryAssistantId);
+    updateActiveTabTitle(assistant.name || "Assistant");
+    return Assistants().initDoc(assistant);
+  }), undefined, [props.assistantId]);
+
+  if (assistant === null) {
+    return <div>Assistant not found with id of {props.assistantId}</div>;
+  }
+
+  if (!assistant) {
+    return <LoadingIndicator />;
+  }
+
+  return (
+    <div className='container-fluid p-3'>
+
+      <div className="d-flex">
+        <div>
+          <h4>
+            <i className="bi bi-person-fill-gear me-2"></i>
+          </h4>
+        </div>
+        <div className="flex-grow-1">
+          <h4>
+            <Input 
+              key={assistant.assistantId}
+              className='border border-0'
+              style={{ width: '100%', outline: 'none', backgroundColor: 'transparent' }}
+              value={assistant.qs.name}
+            />
+          </h4>
+        </div>
+        <div className="">
+
+          <SaveButton 
+            key={assistant.assistantId} 
+            doc={assistant}
+          />
+        </div>
+      </div>
+
+      <Tabs
+        key={assistant.assistantId}
+        tabs={[
+          { name: 'Info', content: <AssistantInfo assistant={assistant} isPrimaryAssistant={isPrimaryAssistant} /> },
+          { name: 'Config', content: <AssistantConfig assistant={assistant} /> },
+          { name: 'Tools', content: <AssistantTools assistant={assistant} />, },
+        ]}
+      />
+
+    </div>
+  );
+}

package/src/screens/assistants/assistant-info.tsx

@@ -0,0 +1,45 @@
+import { IAssistant, IDoc, Observable } from "@peers-app/peers-sdk";
+import React from "react";
+import { Input } from "../../components/input";
+import { MarkdownEditorInline } from "../../components/markdown-editor/editor-inline";
+import { useObservable } from "../../hooks";
+
+export const AssistantInfo = (props: { assistant: IDoc<IAssistant>, isPrimaryAssistant: Observable<boolean> }) => {
+  const { assistant, isPrimaryAssistant } = props;
+
+  useObservable(isPrimaryAssistant);
+
+  return (
+    <div>
+
+      <small>Name:</small>
+      <Input
+        value={assistant.qs.name}
+        className="form-control mb-3 p-0 ps-2"
+        placeholder="Tool name"
+        title="Tool name"
+      />
+
+      <div>
+        <label htmlFor="isPrimary" className="form-label small mt-2 me-2">Primary Assistant:</label>
+        <input
+          type="checkbox"
+          checked={isPrimaryAssistant()}
+          onChange={(e) => {
+            const checked = (e.target as HTMLInputElement).checked;
+            isPrimaryAssistant(checked);
+            assistant.q(assistant.q() + 1);
+          }}
+        />
+      </div>
+
+      <div className='mt-2'>
+        <small>Description:</small>
+        <MarkdownEditorInline
+          value={assistant.qs.description as any}
+        />
+      </div>
+
+    </div>
+  );
+};

package/src/screens/assistants/assistant-list.tsx

@@ -0,0 +1,115 @@
+import { Assistants, IAssistant, ICursorIterable, newid, observable } 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 const AssistantList = () => {
+  const [searchTextObs] = useState(() => observable(''));
+  const [searchText] = useObservable(searchTextObs);
+
+  const [cursorObs] = useState(() => observable<ICursorIterable<IAssistant>>());
+  const [cursorId] = useState(() => observable(newid()));
+
+  async function newCursor() {
+    let cursor: ICursorIterable<IAssistant>;
+    const _searchText = searchText.trim();
+    if (_searchText) {
+      cursor = await Assistants().cursor({ name: { $matchWords: _searchText } }, { sortBy: ['-updatedAt'] });
+    } else {
+      cursor = await Assistants().cursor(undefined, { sortBy: ['-updatedAt'] });
+    }
+
+    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 assistantName = searchText.trim();
+    const assistant = await Assistants().initRecord({
+      name: assistantName,
+    });
+    await Assistants().insert(assistant);
+    mainContentPath(`assistants/${assistant.assistantId}`);
+  }
+
+  async function loadMore(loadedRecords: IAssistant[]): Promise<IAssistant[]> {
+    let moreMatches: IAssistant[] = [];
+    let cursor = cursorObs() || await newCursor();
+    for await (const assistant of cursor) {
+      if (loadedRecords.find(a => a.assistantId === assistant.assistantId)) continue;
+      moreMatches.push(assistant);
+      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" 
+        style={{ marginBottom: "10px" }} 
+        placeholder="Search or create new assistant"
+        autoFocus={isDesktop() ? true : false}
+        onKeyUp={evt => searchSubmit(evt)}
+      />
+
+      <div className="peers-list-container">
+        <LazyList
+          key={cursorId()}
+          loadMore={loadMore}
+          scrollThreshold={0.6}
+          renderItems={(assistants) => {
+            return assistants.map(assistant => {
+              return (
+                <div
+                  key={assistant.assistantId}
+                  className='container-fluid pb-4'
+                >
+                  <i className="bi bi-person-fill-gear"></i>&nbsp;
+                  <a href={`#assistants/${assistant.assistantId}`}>
+                    {assistant.name}
+                  </a>
+                  <div style={{ paddingLeft: '20px' }}>
+                    <MarkdownWithMentions content={assistant.description ?? ''} />
+                  </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>
+  );
+};

package/src/screens/assistants/assistant-tools.tsx

@@ -0,0 +1,61 @@
+import React from "react";
+import { Assistants, IAssistant, ToolInclusionStrategy, IDoc, camelCaseToSpaces } from "@peers-app/peers-sdk";
+import { Tooltip } from "../../components/tooltip";
+import { MarkdownEditorInline } from "../../components/markdown-editor/editor-inline";
+import { useObservable } from "../../hooks";
+
+export const AssistantTools = (props: { assistant: IDoc<IAssistant> }) => {
+  const { assistant } = props;
+
+  return (
+    <div>
+
+      <div className='mt-2'>
+        <small>
+          Tool Inclusion Strategy:
+          <small>
+            <Tooltip markdownContent={Assistants().metaData.fields.find(f => f.name === 'toolInclusionStrategy')?.description ?? ''} />
+          </small>
+        </small>
+        <ToolInclusionStrategyDropDown assistant={assistant} />
+      </div>
+
+      <div className='mt-2'>
+        <small>
+          Tools to Include:
+          <small>
+            <Tooltip markdownContent={Assistants().metaData.fields.find(f => f.name === 'toolsToInclude')?.description ?? ''} />
+          </small>
+        </small>
+        <MarkdownEditorInline
+          value={assistant.qs.toolsToInclude as any}
+        />
+      </div>
+
+    </div>
+  );
+};
+
+
+const ToolInclusionStrategyDropDown = (props: { assistant: IDoc<IAssistant> }) => {
+  const { assistant } = props;  
+
+  useObservable(assistant.qs.toolInclusionStrategy);
+  
+  return (
+    <div className="dropdown">
+      <button className="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+        {camelCaseToSpaces(assistant.toolInclusionStrategy)}
+      </button>
+      <ul className="dropdown-menu">
+        {Object.values(ToolInclusionStrategy).map(strategy => {
+          return (
+            <li key={strategy} onClick={() => assistant.toolInclusionStrategy = strategy}>
+              <span className="dropdown-item">{camelCaseToSpaces(strategy)}</span>
+            </li>
+          )
+        })}
+      </ul>
+    </div>
+  );
+}