@peers-app/peers-ui 0.27.3 → 0.27.4

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

@@ -1,54 +0,0 @@
-import { type IAssistant, type IDoc, observable } from "@peers-app/peers-sdk";
-import { fireEvent, render, screen, waitFor } from "@testing-library/react";
-import { AssistantConfig } from "./assistant-config";
-
-const mockRunners = [
-  { toolId: "selected", name: "Retired", catalogState: "quarantined" },
-  { toolId: "hidden", name: "Other unavailable", catalogState: "quarantined" },
-  { toolId: "available", name: "Available" },
-];
-const mockCatalog = jest.fn();
-jest.mock("@peers-app/peers-sdk", () => ({
-  ...jest.requireActual("@peers-app/peers-sdk"),
-  Tools: () => ({
-    get: async () => mockRunners[0],
-    list: async () => mockRunners,
-  }),
-}));
-jest.mock("../tools/tool-catalog-ipc", () => ({
-  getToolCatalogConsumer: () => mockCatalog(),
-}));
-jest.mock("../../components/io-schema-values", () => ({ IOSchemaValues: () => null }));
-
-test.each([
-  "catalog",
-  "browser fallback",
-])("runner selection retains a disabled current runner in %s", async (mode) => {
-  mockCatalog.mockReset();
-  if (mode === "catalog")
-    mockCatalog.mockResolvedValue({
-      tools: {
-        getTool: async ({ toolIdOrName }: { toolIdOrName: string }) => ({
-          tool: { workflowInvocable: toolIdOrName === "available" },
-        }),
-      },
-    });
-  else mockCatalog.mockRejectedValue(new Error("No host transport"));
-  const selected = observable("selected");
-  const assistant = {
-    assistantRunnerToolId: "selected",
-    qs: { assistantRunnerToolId: selected },
-  } as unknown as IDoc<IAssistant>;
-  const { container } = render(<AssistantConfig assistant={assistant} />);
-  await screen.findByRole("button", { name: "Available" });
-  const retired = container.querySelector<HTMLButtonElement>(".dropdown-menu button:disabled");
-  expect(retired).toHaveTextContent("Retired (unavailable)");
-  expect(container.querySelector(".dropdown-toggle")).toHaveTextContent("Retired (unavailable)");
-  expect(screen.queryByText("Other unavailable")).not.toBeInTheDocument();
-  if (!retired) throw new Error("Missing unavailable runner option");
-  fireEvent.click(retired);
-  expect(selected()).toBe("selected");
-  fireEvent.click(screen.getByRole("button", { name: "Available" }));
-  await waitFor(() => expect(selected()).toBe("available"));
-  expect(screen.queryByText("Retired (unavailable)")).not.toBeInTheDocument();
-});

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

@@ -1,121 +0,0 @@
-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";
-import { getToolCatalogConsumer } from "../tools/tool-catalog-ipc";
-
-/** Edit assistant runner selection and its configuration. */
-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 });
-    let availableIds: Set<string>;
-    try {
-      const catalog = await getToolCatalogConsumer();
-      const entries = await Promise.all(
-        modelTools.map((tool) =>
-          catalog.tools.getTool({ toolIdOrName: tool.toolId, runnableOnly: true }),
-        ),
-      );
-      availableIds = new Set(
-        modelTools
-          .filter((_tool, index) => entries[index].tool?.workflowInvocable)
-          .map((tool) => tool.toolId),
-      );
-    } catch {
-      availableIds = new Set(
-        modelTools.filter((tool) => tool.catalogState !== "quarantined").map((tool) => tool.toolId),
-      );
-    }
-    return modelTools.map((tool) => ({ tool, available: availableIds.has(tool.toolId) }));
-  });
-
-  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)?.tool.name ?? "Select Tool"}
-        {modelTools.some(({ tool, available }) => tool.toolId === selectedToolId && !available)
-          ? " (unavailable)"
-          : ""}
-      </button>
-      <ul className="dropdown-menu">
-        {modelTools
-          .filter(({ tool, available }) => available || tool.toolId === selectedToolId)
-          .map(({ tool, available }) => {
-            return (
-              <li key={tool.toolId}>
-                <button
-                  className="dropdown-item"
-                  type="button"
-                  disabled={!available}
-                  onClick={() => props.selectedToolId(tool.toolId)}
-                >
-                  {tool.name}
-                  {available ? "" : " (unavailable)"}
-                </button>
-              </li>
-            );
-          })}
-      </ul>
-    </div>
-  );
-};

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

@@ -1,89 +0,0 @@
-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],
-  );
-
-  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={userAssistantId === assistant.assistantId}
-                isGroupPrimaryAssistant={groupAssistantId === assistant.assistantId}
-                onSetPrimary={(checked) =>
-                  userPrimaryAssistantVar(checked ? assistant.assistantId : undefined)
-                }
-                onSetGroupPrimary={(checked) =>
-                  groupPrimaryAssistantVar(checked ? assistant.assistantId : undefined)
-                }
-              />
-            ),
-          },
-          { name: "Config", content: <AssistantConfig assistant={assistant} /> },
-          { name: "Tools", content: <AssistantTools assistant={assistant} /> },
-        ]}
-      />
-    </div>
-  );
-};

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

@@ -1,66 +0,0 @@
-import type { IAssistant, IDoc, Observable } from "@peers-app/peers-sdk";
-import { AccessLevelField } from "../../components/access-level-field";
-import { Input } from "../../components/input";
-import { MarkdownEditorInline } from "../../components/markdown-editor/editor-inline";
-
-interface AssistantInfoProps {
-  assistant: IDoc<IAssistant>;
-  isPrimaryAssistant: boolean;
-  isGroupPrimaryAssistant: boolean;
-  onSetPrimary: (checked: boolean) => void;
-  onSetGroupPrimary: (checked: boolean) => void;
-}
-
-/** Info tab for an Assistant, including its access-level policy. */
-export const AssistantInfo = (props: AssistantInfoProps) => {
-  const {
-    assistant,
-    isPrimaryAssistant,
-    isGroupPrimaryAssistant,
-    onSetPrimary,
-    onSetGroupPrimary,
-  } = props;
-
-  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">
-          My Default Assistant:
-        </label>
-        <input
-          type="checkbox"
-          id="isPrimary"
-          checked={isPrimaryAssistant}
-          onChange={(e) => onSetPrimary((e.target as HTMLInputElement).checked)}
-        />
-      </div>
-
-      <div>
-        <label htmlFor="isGroupPrimary" className="form-label small mt-2 me-2">
-          Group Default Assistant:
-        </label>
-        <input
-          type="checkbox"
-          id="isGroupPrimary"
-          checked={isGroupPrimaryAssistant}
-          onChange={(e) => onSetGroupPrimary((e.target as HTMLInputElement).checked)}
-        />
-      </div>
-
-      <AccessLevelField value={assistant.qs.accessLevel} />
-
-      <div className="mt-2">
-        <small>Description:</small>
-        <MarkdownEditorInline value={assistant.qs.description as Observable<string>} />
-      </div>
-    </div>
-  );
-};

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

@@ -1,145 +0,0 @@
-import {
-  Assistants,
-  canInvokeAssistant,
-  getAccessLevelLabel,
-  getCurrentUserAccessLevel,
-  getUserContext,
-  type IAssistant,
-  type ICursorIterable,
-  newid,
-  observable,
-  recordAccessLevel,
-} 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 { useObservable, usePromise } from "../../hooks";
-
-/** Searchable Assistant list with access-level visibility. */
-export const AssistantList = () => {
-  const [searchTextObs] = useState(() => observable(""));
-  const [searchText] = useObservable(searchTextObs);
-
-  const [cursorObs] = useState(() => observable<ICursorIterable<IAssistant> | undefined>());
-  const [cursorId] = useState(() => observable(newid()));
-  const userLevel = usePromise(async () => {
-    const userContext = await getUserContext();
-    return getCurrentUserAccessLevel(userContext.defaultDataContext());
-  }, 100);
-
-  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();
-  }, [cursorId, cursorObs, searchTextObs.subscribe]);
-
-  async function searchSubmit(evt: React.KeyboardEvent<HTMLInputElement>) {
-    if (evt.key !== "Enter") return;
-    if (!searchText.trim()) return;
-    const 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[]> {
-    const moreMatches: IAssistant[] = [];
-    const 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()}
-        onKeyUp={(evt) => searchSubmit(evt)}
-      />
-
-      <div className="peers-list-container">
-        <LazyList
-          key={cursorId()}
-          loadMore={loadMore}
-          scrollThreshold={0.6}
-          renderItems={(assistants) => {
-            return assistants.map((assistant) => {
-              const required = recordAccessLevel(assistant);
-              const allowed = canInvokeAssistant(userLevel ?? 100, required);
-              return (
-                <div
-                  key={assistant.assistantId}
-                  className="container-fluid pb-4"
-                  style={allowed ? undefined : { opacity: 0.65 }}
-                >
-                  <i className="bi bi-person-fill-gear"></i>&nbsp;
-                  <a href={`#assistants/${assistant.assistantId}`}>{assistant.name}</a>
-                  {!allowed && (
-                    <span className="badge text-bg-secondary ms-2">
-                      Requires {getAccessLevelLabel(required)} ({required})
-                    </span>
-                  )}
-                  <div style={{ paddingLeft: "20px" }}>
-                    <MarkdownWithMentions content={assistant.description ?? ""} />
-                    {!allowed && (
-                      <div className="small text-muted">
-                        You cannot invoke this Assistant with your current access (
-                        {getAccessLevelLabel(userLevel ?? 100)}).
-                      </div>
-                    )}
-                  </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

@@ -1,82 +0,0 @@
-import {
-  Assistants,
-  camelCaseToSpaces,
-  type IAssistant,
-  type IDoc,
-  type Observable,
-  ToolInclusionStrategy,
-} from "@peers-app/peers-sdk";
-import { MarkdownEditorInline } from "../../components/markdown-editor/editor-inline";
-import { Tooltip } from "../../components/tooltip";
-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 Observable<string>} />
-      </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>
-  );
-};