@peers-app/peers-ui 0.14.0 → 0.15.0

package/src/index.tsx

@@ -1,13 +1,20 @@
-export * from "./hooks";
-
-export * from "./tabs-layout/tabs-layout";
-export { activeTabId, activeTabs, TabState, updateActiveTabTitle, closeCurrentTab, goToTabPath } from "./tabs-layout/tabs-state";
-export { mainContentPath } from "./globals";
-export * from "./components/voice-indicator";
 export * from "./components/chat-overlay";
-export * from "./components/sortable-list";
-export * from "./components/tabs";
 export * from "./components/inverse-lazy-list";
+export type { IEditorEffects, IMarkdownEditorProps } from "./components/markdown-editor/editor";
+export { MarkdownEditor } from "./components/markdown-editor/editor";
 export * from "./components/markdown-editor/editor-inline";
-export * from "./components/markdown-editor/editor";
-export * from "./components/markdown-with-mentions";
+export * from "./components/markdown-with-mentions";
+export * from "./components/sortable-list";
+export * from "./components/tabs";
+export * from "./components/voice-indicator";
+export { mainContentPath } from "./globals";
+export * from "./hooks";
+export * from "./tabs-layout/tabs-layout";
+export {
+  activeTabId,
+  activeTabs,
+  closeCurrentTab,
+  goToTabPath,
+  TabState,
+  updateActiveTabTitle,
+} from "./tabs-layout/tabs-state";

package/src/mention-configs.ts

@@ -1,4 +1,13 @@
-import { Assistants, IMentionData, PeerTypes, rpcClientCalls, Tools, Users, Workflows } from "@peers-app/peers-sdk";
+import {
+  Assistants,
+  type IMentionData,
+  PeerTypes,
+  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;
@@ -10,101 +19,146 @@ export interface IMentionConfig {
   query: (text: string) => Promise<IMentionData[]>;
   getById: (id: string) => Promise<IMentionData | undefined>;
   picture?: (data: IMentionData) => JSX.Element;
-  onClick?: ((data: IMentionData) => void);
+  onClick?: (data: IMentionData) => void;
 }
 
 export const toolMentionConfig: IMentionConfig = {
-  kind: 'tool',
-  iconClass: 'bi bi-tools',
-  styleClass: 'mention-tool',
+  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',
+    const results = await Tools().list(
+      { name: { $matchWords: search } },
+      { pageSize: MENTIONS_MAX_RESULTS },
+    );
+    return results.map((p) => ({
+      kind: "tool",
       id: p.toolId,
-      name: p.name
+      name: p.name,
     }));
   },
-  getById: id => Tools().get(id).then(item => item && {
-    kind: 'tool',
-    id: item.toolId,
-    name: item.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',
+  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,
-      })));
+    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
-  }),
+  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',
+  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,
-      })));
+    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
-  }),
+  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',
+  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,
-      })));
+    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
-  }),
+  getById: (id) =>
+    Workflows()
+      .get(id)
+      .then(
+        (item) =>
+          item && {
+            kind: "workflow",
+            id: item.workflowId,
+            name: item.name,
+          },
+      ),
 };
 
 export const valueTypeMentionConfig: IMentionConfig = {
-  kind: 'type',
-  iconClass: 'bi bi-code-square',
+  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',
+    const results = await PeerTypes().list(
+      { name: { $matchWords: search } },
+      { pageSize: MENTIONS_MAX_RESULTS },
+    );
+    return results.map((item) => ({
+      kind: "type",
       id: item.peerTypeId,
-      name: item.name
+      name: item.name,
     }));
   },
-  getById: id => PeerTypes().get(id).then(item => 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(`peer-types/${data.id}`);
   },
@@ -124,4 +178,4 @@ export const mentionConfigs = [
   assistantMentionConfig,
   workflowMentionConfig,
   valueTypeMentionConfig,
-];
+];

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

@@ -1,5 +1,10 @@
-import { IAssistant, IDoc, IOSchemaType, Observable, Tools } from "@peers-app/peers-sdk";
-import React from "react";
+import {
+  type IAssistant,
+  type IDoc,
+  IOSchemaType,
+  type Observable,
+  Tools,
+} from "@peers-app/peers-sdk";
 import { IOSchemaValues } from "../../components/io-schema-values";
 import { LoadingIndicator } from "../../components/loading-indicator";
 import { useObservable, usePromise } from "../../hooks";
@@ -17,8 +22,8 @@ export const AssistantConfig = (props: { assistant: IDoc<IAssistant> }) => {
 
   if (assistantRunnerTool === null) {
     return (
-      <div>  
-        <div className='mt-2'>
+      <div>
+        <div className="mt-2">
           <small>Assistant Runner Tool:</small>
           <AssistantRunnersDropdown selectedToolId={assistant.qs.assistantRunnerToolId} />
         </div>
@@ -26,30 +31,30 @@ export const AssistantConfig = (props: { assistant: IDoc<IAssistant> }) => {
     );
   }
 
-  assistantRunnerTool.configSchema = assistantRunnerTool.configSchema ?? { 
+  assistantRunnerTool.configSchema = assistantRunnerTool.configSchema ?? {
     type: IOSchemaType.complex,
-    fields: []
+    fields: [],
   };
 
   return (
     <div>
-
-      <div className='mt-2'>
+      <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} />
-
+      <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;
@@ -61,20 +66,25 @@ const AssistantRunnersDropdown = (props: { selectedToolId: Observable<string> })
 
   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
+        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 => {
+        {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

@@ -1,29 +1,34 @@
-import { Assistants, groupPrimaryAssistantVar, userPrimaryAssistantVar } from "@peers-app/peers-sdk";
-import React 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 { useObservable, 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';
-
+import {
+  Assistants,
+  groupPrimaryAssistantVar,
+  userPrimaryAssistantVar,
+} from "@peers-app/peers-sdk";
+import { Input } from "../../components/input";
+import { LoadingIndicator } from "../../components/loading-indicator";
+import { SaveButton } from "../../components/save-button";
+import { Tabs } from "../../components/tabs";
+import { useObservable, 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 [userAssistantId] = useObservable(userPrimaryAssistantVar);
   const [groupAssistantId] = useObservable(groupPrimaryAssistantVar);
 
-  const assistant = usePromise((async () => {
-    const assistant = await Assistants().get(props.assistantId);
-    if (!assistant) {
-      return null;
-    }
-    updateActiveTabTitle(assistant.name || "Assistant");
-    return Assistants().initDoc(assistant);
-  }), undefined, [props.assistantId]);
+  const assistant = usePromise(
+    async () => {
+      const assistant = await Assistants().get(props.assistantId);
+      if (!assistant) {
+        return null;
+      }
+      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>;
@@ -34,8 +39,7 @@ export const AssistantDetails = (props: { assistantId: string }) => {
   }
 
   return (
-    <div className='container-fluid p-3'>
-
+    <div className="container-fluid p-3">
       <div className="d-flex">
         <div>
           <h4>
@@ -44,20 +48,16 @@ export const AssistantDetails = (props: { assistantId: string }) => {
         </div>
         <div className="flex-grow-1">
           <h4>
-            <Input 
+            <Input
               key={assistant.assistantId}
-              className='border border-0'
-              style={{ width: '100%', outline: 'none', backgroundColor: 'transparent' }}
+              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}
-          />
+          <SaveButton key={assistant.assistantId} doc={assistant} />
         </div>
       </div>
 
@@ -65,7 +65,7 @@ export const AssistantDetails = (props: { assistantId: string }) => {
         key={assistant.assistantId}
         tabs={[
           {
-            name: 'Info',
+            name: "Info",
             content: (
               <AssistantInfo
                 assistant={assistant}
@@ -80,11 +80,10 @@ export const AssistantDetails = (props: { assistantId: string }) => {
               />
             ),
           },
-          { name: 'Config', content: <AssistantConfig assistant={assistant} /> },
-          { name: 'Tools', content: <AssistantTools assistant={assistant} />, },
+          { name: "Config", content: <AssistantConfig assistant={assistant} /> },
+          { name: "Tools", content: <AssistantTools assistant={assistant} /> },
         ]}
       />
-
     </div>
   );
-}
+};

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

@@ -1,5 +1,4 @@
-import { IAssistant, IDoc } from "@peers-app/peers-sdk";
-import React from "react";
+import type { IAssistant, IDoc, Observable } from "@peers-app/peers-sdk";
 import { Input } from "../../components/input";
 import { MarkdownEditorInline } from "../../components/markdown-editor/editor-inline";
 
@@ -12,11 +11,16 @@ interface AssistantInfoProps {
 }
 
 export const AssistantInfo = (props: AssistantInfoProps) => {
-  const { assistant, isPrimaryAssistant, isGroupPrimaryAssistant, onSetPrimary, onSetGroupPrimary } = props;
+  const {
+    assistant,
+    isPrimaryAssistant,
+    isGroupPrimaryAssistant,
+    onSetPrimary,
+    onSetGroupPrimary,
+  } = props;
 
   return (
     <div>
-
       <small>Name:</small>
       <Input
         value={assistant.qs.name}
@@ -26,7 +30,9 @@ export const AssistantInfo = (props: AssistantInfoProps) => {
       />
 
       <div>
-        <label htmlFor="isPrimary" className="form-label small mt-2 me-2">My Default Assistant:</label>
+        <label htmlFor="isPrimary" className="form-label small mt-2 me-2">
+          My Default Assistant:
+        </label>
         <input
           type="checkbox"
           id="isPrimary"
@@ -36,7 +42,9 @@ export const AssistantInfo = (props: AssistantInfoProps) => {
       </div>
 
       <div>
-        <label htmlFor="isGroupPrimary" className="form-label small mt-2 me-2">Group Default Assistant:</label>
+        <label htmlFor="isGroupPrimary" className="form-label small mt-2 me-2">
+          Group Default Assistant:
+        </label>
         <input
           type="checkbox"
           id="isGroupPrimary"
@@ -45,13 +53,10 @@ export const AssistantInfo = (props: AssistantInfoProps) => {
         />
       </div>
 
-      <div className='mt-2'>
+      <div className="mt-2">
         <small>Description:</small>
-        <MarkdownEditorInline
-          value={assistant.qs.description as any}
-        />
+        <MarkdownEditorInline value={assistant.qs.description as Observable<string>} />
       </div>
-
     </div>
   );
 };

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

@@ -1,15 +1,21 @@
-import { Assistants, IAssistant, ICursorIterable, newid, observable } from "@peers-app/peers-sdk";
-import React, { useEffect, useState } from 'react';
+import {
+  Assistants,
+  type IAssistant,
+  type ICursorIterable,
+  newid,
+  observable,
+} from "@peers-app/peers-sdk";
+import type React from "react";
+import { 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 { 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 [searchTextObs] = useState(() => observable(""));
   const [searchText] = useObservable(searchTextObs);
 
   const [cursorObs] = useState(() => observable<ICursorIterable<IAssistant> | undefined>());
@@ -19,9 +25,12 @@ export const AssistantList = () => {
     let cursor: ICursorIterable<IAssistant>;
     const _searchText = searchText.trim();
     if (_searchText) {
-      cursor = await Assistants().cursor({ name: { $matchWords: _searchText } }, { sortBy: ['-updatedAt'] });
+      cursor = await Assistants().cursor(
+        { name: { $matchWords: _searchText } },
+        { sortBy: ["-updatedAt"] },
+      );
     } else {
-      cursor = await Assistants().cursor(undefined, { sortBy: ['-updatedAt'] });
+      cursor = await Assistants().cursor(undefined, { sortBy: ["-updatedAt"] });
     }
 
     cursorObs(cursor);
@@ -35,12 +44,12 @@ export const AssistantList = () => {
       cursorId(newid());
     });
     return () => sub.dispose();
-  }, [searchText]);
+  }, [cursorId, cursorObs, searchTextObs.subscribe]);
 
   async function searchSubmit(evt: React.KeyboardEvent<HTMLInputElement>) {
     if (evt.key !== "Enter") return;
     if (!searchText.trim()) return;
-    let assistantName = searchText.trim();
+    const assistantName = searchText.trim();
     const assistant = await Assistants().initRecord({
       name: assistantName,
     });
@@ -49,10 +58,10 @@ export const AssistantList = () => {
   }
 
   async function loadMore(loadedRecords: IAssistant[]): Promise<IAssistant[]> {
-    let moreMatches: IAssistant[] = [];
-    let cursor = cursorObs() || await newCursor();
+    const moreMatches: IAssistant[] = [];
+    const cursor = cursorObs() || (await newCursor());
     for await (const assistant of cursor) {
-      if (loadedRecords.find(a => a.assistantId === assistant.assistantId)) continue;
+      if (loadedRecords.find((a) => a.assistantId === assistant.assistantId)) continue;
       moreMatches.push(assistant);
       if (searchText.length && moreMatches.length > 5) break;
       if (moreMatches.length >= 50) break;
@@ -64,14 +73,14 @@ export const AssistantList = () => {
   }
 
   return (
-    <div className='container-fluid'>
-      <Input 
-        value={searchTextObs} 
-        className="form-control" 
-        style={{ marginBottom: "10px" }} 
+    <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)}
+        autoFocus={!!isDesktop()}
+        onKeyUp={(evt) => searchSubmit(evt)}
       />
 
       <div className="peers-list-container">
@@ -80,23 +89,17 @@ export const AssistantList = () => {
           loadMore={loadMore}
           scrollThreshold={0.6}
           renderItems={(assistants) => {
-            return assistants.map(assistant => {
+            return assistants.map((assistant) => {
               return (
-                <div
-                  key={assistant.assistantId}
-                  className='container-fluid pb-4'
-                >
+                <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 ?? ''} />
+                  <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 }}>