@peers-app/peers-ui 0.27.2 → 0.27.4

package/src/components/markdown-with-mentions.tsx

@@ -1,198 +0,0 @@
-// import { FileListDisplay } from './file-list-display';
-import { type IMentionData, mentionRegex } from "@peers-app/peers-sdk";
-import React from "react";
-import ReactMarkdown from "react-markdown";
-import remarkGfm from "remark-gfm";
-import { openOnHost } from "../host-shell/host-shell-consumer";
-import { mentionConfigs } from "../mention-configs";
-
-// Custom Link Renderer
-const LinkRenderer = (props: { href?: string; children?: React.ReactNode }) => {
-  const { href } = props;
-  return (
-    <a
-      href={href}
-      onClick={(e) => {
-        if (href?.startsWith("http")) {
-          e.preventDefault();
-          void openOnHost(href);
-        }
-      }}
-    >
-      {props.children}
-    </a>
-  );
-};
-
-const processTextWithMentions = (text: string) => {
-  const parts: React.ReactNode[] = [];
-  let lastIndex = 0;
-  let match: RegExpExecArray | null;
-  let cnt = 0;
-
-  const regex = mentionRegex();
-  match = regex.exec(text);
-  while (match !== null) {
-    cnt++;
-    if (match.index > lastIndex) {
-      parts.push(text.slice(lastIndex, match.index));
-    }
-    text = text.slice(match.index + match[0].length);
-
-    const kind = match[2];
-    const name = match[3].replace(/_/g, " ");
-    const id = match[4];
-    const data: IMentionData = {
-      kind,
-      name,
-      id,
-    };
-
-    const style: React.CSSProperties = { cursor: "pointer" };
-    if (name.length < 20) {
-      style.whiteSpace = "nowrap";
-    }
-
-    const mentionConfig = mentionConfigs.find((c) => c.kind === kind);
-    const mentionClass = mentionConfig
-      ? mentionConfig.styleClass || "mention-default-default"
-      : `mention-${kind}`;
-    const onClick = mentionConfig?.onClick;
-    const href = (!onClick && `#${kind}s/${id}`) || undefined;
-    const icon = (kind === "user" && "@") ||
-      (mentionConfig?.iconClass && <i className={`pe-1 ${mentionConfig.iconClass}`}></i>) || (
-        <i className={`pe-1 bi bi-question`}></i>
-      );
-
-    parts.push(
-      <a
-        key={cnt}
-        className={mentionClass}
-        data-kind={kind}
-        data-id={id}
-        style={style}
-        href={href}
-        onClick={onClick && (() => onClick(data))}
-      >
-        {icon}
-        {/* {data.kind === 'task' &&
-          <span className='pe-1'>
-            <TaskCheckbox taskId={id} />
-          </span>
-        } */}
-        {data.name}
-      </a>,
-    );
-    lastIndex = regex.lastIndex;
-    match = regex.exec(text);
-  }
-
-  if (lastIndex < text.length) {
-    parts.push(text.slice(lastIndex));
-  }
-
-  return parts;
-};
-
-// const TaskCheckbox = (props: { taskId: string }) => {
-//   const [task, setTask] = useState<ITask | null>(null);
-//   const [checked, setChecked] = useState(false);
-
-//   useEffect(() => {
-//     Tasks().get(props.taskId).then(task => {
-//       if (!task) return;
-//       setTask(task)
-//     });
-//     const sub = Tasks().dataChanged.subscribe(evt => {
-//       if (evt.dataObject.taskId === props.taskId) {
-//         setChecked(!!evt.dataObject.completeDT);
-//         setTask(evt.dataObject);
-//       }
-//     });
-//     Tasks().get(props.taskId).then(task => {
-//       if (task) {
-//         setChecked(!!task.completeDT);
-//       }
-//     });
-//     return () => {
-//       sub.unsubscribe();
-//     };
-//   }, [props.taskId])
-
-//   return (
-//     <input
-//       type="checkbox"
-//       disabled={!task}
-//       checked={checked}
-//       onChange={(e) => {
-//         if (!task) return;
-//         if (checked) {
-//           task.completeDT = undefined;
-//         } else {
-//           task.completeDT = new Date();
-//         }
-//         Tasks().update(task);
-//         setChecked(!checked);
-//       }}
-//     />
-//   );
-// };
-
-const createElementWithMentions = (Element: React.ElementType) => {
-  return ({
-    node: _node,
-    ...props
-  }: {
-    node?: unknown;
-    children?: React.ReactNode;
-    [key: string]: unknown;
-  }) => {
-    return (
-      <Element {...props}>
-        {React.Children.map(props.children, (child) => {
-          if (typeof child === "string") {
-            return processTextWithMentions(child);
-          }
-          return child;
-        })}
-      </Element>
-    );
-  };
-};
-
-/**
- * Render markdown (GitHub-flavored) with `@mentions` turned into links. Web links open in
- * the system browser through System Host Shell instead of navigating the app window.
- */
-export const MarkdownWithMentions: React.FC<{ content: string }> = ({ content }) => {
-  const components = {
-    p: createElementWithMentions("p"),
-    h1: createElementWithMentions("h1"),
-    h2: createElementWithMentions("h2"),
-    h3: createElementWithMentions("h3"),
-    h4: createElementWithMentions("h4"),
-    h5: createElementWithMentions("h5"),
-    h6: createElementWithMentions("h6"),
-    li: createElementWithMentions("li"),
-    // a: createElementWithMentions('a'),
-    a: LinkRenderer,
-    strong: createElementWithMentions("strong"),
-    em: createElementWithMentions("em"),
-    blockquote: createElementWithMentions("blockquote"),
-    code: createElementWithMentions("code"),
-    td: createElementWithMentions("td"),
-    th: createElementWithMentions("th"),
-  };
-
-  return (
-    <div className="markdown">
-      <ReactMarkdown
-        remarkPlugins={[remarkGfm]}
-        // @ts-expect-error
-        components={components}
-      >
-        {content}
-      </ReactMarkdown>
-    </div>
-  );
-};

package/src/components/message-logs/message-logs.tsx

@@ -1,523 +0,0 @@
-import {
-  Assistants,
-  formatMention,
-  getUserContext,
-  type IToolAccessApproval,
-  type IWorkflowLog,
-  type IWorkflowRun,
-  type Observable,
-  observable,
-  runWorkflowToolId,
-  ToolAccessApprovals,
-  Tools,
-  WorkflowLogs,
-  WorkflowRuns,
-  Workflows,
-} from "@peers-app/peers-sdk";
-import { orderBy, sortBy, uniq, uniqBy } from "lodash";
-import moment from "moment";
-import { useCallback, useEffect, useState } from "react";
-import { useObservable, useObservableState, usePromise } from "../../hooks";
-import { MarkdownWithMentions } from "../markdown-with-mentions";
-import { ToolAccessApprovalCard } from "./tool-access-approval-card";
-
-interface MessageLogsProps {
-  messageId: string;
-}
-
-/** Workflow logs and tool-access approval cards for a thread message. */
-export const MessageLogs = ({ messageId }: MessageLogsProps) => {
-  const workflowRunIds = useObservableState<string[]>([]);
-  const showLogs = useObservableState(false);
-  const [runs] = useState(() => observable([] as IWorkflowRun[]));
-  const [logIds] = useState(() => observable([] as string[]));
-
-  const refreshLogCount = useCallback(async () => {
-    const workflowRuns = await WorkflowRuns().list({ parentMessageId: messageId });
-    const workflowLogs = await WorkflowLogs().list({
-      workflowRunId: { $in: workflowRuns.map((r) => r.workflowRunId) },
-    });
-    logIds(workflowLogs.map((l) => l.workflowLogId));
-  }, [messageId, logIds]);
-
-  useEffect(() => {
-    WorkflowRuns()
-      .list({ parentMessageId: messageId })
-      .then(async (_runs) => {
-        if (!_runs.length && !runs().length) {
-          return;
-        }
-        runs(_runs);
-        refreshLogCount();
-      });
-
-    const subRuns = WorkflowRuns().dataChanged.subscribe(async (evt) => {
-      const workflowRun = evt.dataObject;
-      if (workflowRun.parentMessageId === messageId) {
-        const _runs = runs().filter((r) => r.workflowRunId !== workflowRun.workflowRunId);
-        if (evt.op !== "delete") {
-          _runs.push(workflowRun);
-        }
-        runs(_runs);
-        refreshLogCount();
-      }
-    });
-
-    const subLogs = WorkflowLogs().dataChanged.subscribe(async (evt) => {
-      const workflowLog = evt.dataObject;
-      if (
-        runs()
-          .map((r) => r.workflowRunId)
-          .includes(workflowLog.workflowRunId)
-      ) {
-        refreshLogCount();
-      }
-    });
-    return () => {
-      subRuns.unsubscribe();
-      subLogs.unsubscribe();
-    };
-  }, [messageId, refreshLogCount, runs]);
-
-  useEffect(() => {
-    let disposed = false;
-
-    function upsertRunIds(ids: string[]) {
-      let runIds = [...workflowRunIds(), ...ids];
-      runIds = uniq(runIds);
-      runIds = runIds.sort();
-      workflowRunIds(runIds);
-    }
-
-    WorkflowRuns()
-      .list({ parentMessageId: messageId })
-      .then(async (runs) => {
-        if (disposed) {
-          return;
-        }
-        upsertRunIds(runs.map((r) => r.workflowRunId));
-      });
-
-    const sub = WorkflowRuns().dataChanged.subscribe(async (evt) => {
-      const workflowRun = evt.dataObject;
-      if (disposed || workflowRun.parentMessageId !== messageId) {
-        return;
-      }
-      let runIds = workflowRunIds().filter((id) => id !== workflowRun.workflowRunId);
-      if (evt.op !== "delete") {
-        runIds.push(workflowRun.workflowRunId);
-      }
-      runIds = uniq(runIds);
-      runIds = sortBy(runIds);
-      workflowRunIds(runIds);
-    });
-
-    return () => {
-      disposed = true;
-      sub.unsubscribe();
-    };
-  }, [messageId, workflowRunIds]);
-
-  if (!workflowRunIds().length) {
-    return <ThreadAccessApprovals messageId={messageId} />;
-  }
-
-  return (
-    <>
-      {/* this space prevents the logs and replies indicator from being included when selecting and copying a message text */}
-      &nbsp;
-      <ShowLogsLink logIds={logIds} showLogs={showLogs} runs={runs} />
-      <ThreadAccessApprovals messageId={messageId} />
-      {showLogs() && (
-        <div>
-          <AllMessageLogs logIds={logIds} runs={runs} />
-        </div>
-      )}
-    </>
-  );
-};
-
-const ThreadAccessApprovals = ({ messageId }: { messageId: string }) => {
-  const [approvals] = useState(() => observable([] as IToolAccessApproval[]));
-  useObservable(approvals);
-
-  useEffect(() => {
-    let disposed = false;
-    let unsubscribe: (() => void) | undefined;
-
-    function setRows(rows: IToolAccessApproval[]) {
-      approvals(rows.sort((a, b) => a.createdAt.getTime() - b.createdAt.getTime()));
-    }
-
-    async function subscribeToContext() {
-      const userContext = await getUserContext();
-      if (disposed) return;
-      const dataContext = userContext.defaultDataContext();
-      const approvalsTable = ToolAccessApprovals(dataContext);
-      const sub = approvalsTable.dataChanged.subscribe((evt) => {
-        const row = evt.dataObject;
-        if (disposed || row.threadMessageId !== messageId) return;
-        const next = approvals().filter(
-          (item) => item.toolAccessApprovalId !== row.toolAccessApprovalId,
-        );
-        if (evt.op !== "delete") next.push(row);
-        setRows(next);
-      });
-      unsubscribe = () => sub.unsubscribe();
-      const rows = await approvalsTable.list({ threadMessageId: messageId });
-      if (!disposed) setRows(rows);
-    }
-
-    void subscribeToContext();
-    return () => {
-      disposed = true;
-      unsubscribe?.();
-    };
-  }, [messageId, approvals]);
-
-  if (!approvals().length) {
-    return false;
-  }
-
-  return (
-    <div>
-      {approvals().map((approval) => (
-        <ToolAccessApprovalCard key={approval.toolAccessApprovalId} approval={approval} />
-      ))}
-    </div>
-  );
-};
-
-const ShowLogsLink = (props: {
-  showLogs: Observable<boolean>;
-  logIds: Observable<string[]>;
-  runs: Observable<IWorkflowRun[]>;
-}) => {
-  const { showLogs, logIds, runs } = props;
-  useObservable(logIds);
-  useObservable(runs);
-  useObservable(showLogs);
-
-  const runsInProgress = runs().filter(
-    (r) => !r.completedAt && !r.inErrorState && (r.startedAt || !r.scheduleDT),
-  );
-  const runsInError = runs().filter((r) => r.inErrorState);
-  const runsScheduled = runs().filter(
-    (r) => !r.startedAt && !r.inErrorState && r.scheduleDT && r.scheduleDT > new Date(),
-  );
-
-  return (
-    <div className="d-inline small">
-      {runsInProgress.length > 0 && (
-        <div
-          className={`spinner-grow spinner-grow-sm text-secondary`}
-          role="status"
-          style={{
-            width: "0.7rem",
-            height: "0.7rem",
-          }}
-        >
-          <span className="visually-hidden">Loading...</span>
-        </div>
-      )}
-
-      {runsInProgress.length + runsInError.length + runsScheduled.length < 1 && (
-        <i className="bi bi-check-circle text-success"></i>
-      )}
-      {runsInError.length > 0 && <i className="bi bi-x-circle text-danger"></i>}
-      {runsScheduled.length > 0 && (
-        <i
-          className="bi bi-clock text-warning"
-          title={`Scheduled for ${moment(runsScheduled[0].scheduleDT).calendar()}`}
-        ></i>
-      )}
-
-      <button
-        className="btn btn-sm btn-link m-1 fw-lighter pt-0"
-        onClick={() => showLogs(!showLogs())}
-        tabIndex={-1}
-      >
-        <span>
-          {!showLogs() && (logIds().length === 1 ? "1 log" : `${logIds().length} logs`)}
-          {showLogs() && (logIds().length === 1 ? "hide 1 log" : `hide ${logIds().length} logs`)}
-        </span>
-      </button>
-
-      {runsInProgress.length + runsScheduled.length > 0 && (
-        <i
-          className="bi bi-stop-circle"
-          style={{ cursor: "pointer" }}
-          onClick={() => {
-            runs().forEach((r) => {
-              if (!r.completedAt && !r.inErrorState) {
-                WorkflowRuns().haltRun(r.workflowRunId);
-              }
-            });
-          }}
-        ></i>
-      )}
-    </div>
-  );
-};
-
-const AllMessageLogs = (props: {
-  logIds: Observable<string[]>;
-  runs: Observable<IWorkflowRun[]>;
-}) => {
-  const { logIds, runs } = props;
-  const runLogs = useObservableState<IWorkflowLog[]>([]);
-  useObservable(runLogs);
-
-  useEffect(() => {
-    let disposed = false;
-
-    function setLogs(logs: IWorkflowLog[]) {
-      logs = uniqBy(logs, (l) => l.workflowLogId);
-      logs = sortBy(logs, (l) => l.logDT);
-      runLogs(logs);
-      logIds(uniq([...logIds(), ...logs.map((l) => l.workflowLogId)]));
-    }
-
-    WorkflowLogs()
-      .list({ workflowLogId: { $in: logIds() } })
-      .then(async (logs) => {
-        if (disposed) {
-          return;
-        }
-        setLogs([...logs, ...runLogs()]);
-      });
-
-    const sub = WorkflowLogs().dataChanged.subscribe(async (evt) => {
-      const workflowLog = evt.dataObject;
-      if (disposed || !logIds().includes(workflowLog.workflowLogId)) {
-        return;
-      }
-      const logs = runLogs().filter((log) => log.workflowLogId !== workflowLog.workflowLogId);
-      if (evt.op !== "delete") {
-        logs.push(workflowLog);
-      }
-      setLogs(logs);
-    });
-
-    return () => {
-      disposed = true;
-      sub.unsubscribe();
-    };
-  }, [logIds, runLogs]);
-
-  if (!runLogs().length) {
-    return false;
-  }
-
-  return <RenderNextLog logs={runLogs()} runs={runs} />;
-};
-
-const RenderNextLog = (props: { logs: IWorkflowLog[]; runs: Observable<IWorkflowRun[]> }) => {
-  let { logs, runs } = props;
-
-  if (!logs.length) {
-    return false;
-  }
-
-  logs = orderBy(logs, (l) => l.logDT);
-  logs = orderBy(logs, (l) => l.workflowRunId);
-
-  const nextLog = logs.shift();
-  if (!nextLog) {
-    return false;
-  }
-  const runsIdsInside = [nextLog.workflowRunId];
-  while (true) {
-    const subRunIds = runs()
-      .filter(
-        (r) =>
-          runsIdsInside.includes(r.parentWorkflowRunId ?? "") &&
-          !runsIdsInside.includes(r.workflowRunId),
-      )
-      .map((r) => r.workflowRunId);
-    if (!subRunIds.length) {
-      break;
-    }
-    runsIdsInside.push(...subRunIds);
-  }
-
-  const logEndDT = new Date(nextLog.logDT.getTime() + (nextLog?.toolRunTimeMs || 0));
-  const logsInside = logs.filter(
-    (l) => l.logDT < logEndDT && runsIdsInside.includes(l.workflowRunId),
-  );
-  const logsAfter = logs.filter(
-    (l) => l.logDT >= logEndDT || !runsIdsInside.includes(l.workflowRunId),
-  );
-
-  const result = nextLog.resultObject
-    ? JSON.stringify(nextLog.resultObject, null, 2)
-    : nextLog.result;
-
-  return (
-    <>
-      <div className="border-start rounded">
-        <LogDisplay log={nextLog} />
-
-        <div className="ms-3">
-          <RenderNextLog logs={logsInside} runs={runs} />
-        </div>
-
-        {result && (
-          <MarkdownWithMentions
-            content={["```", `Result: ${result}`, "```"].filter((s) => s).join("\n")}
-          />
-        )}
-      </div>
-
-      {logsAfter.length > 0 && <RenderNextLog logs={logsAfter} runs={runs} />}
-    </>
-  );
-};
-
-const LogDisplay = (props: { log: IWorkflowLog }) => {
-  const { log } = props;
-  const [showMenu] = useState(() => observable(false));
-  const showRawJson = useObservableState(false);
-  const tool = usePromise(async () => {
-    if (log.toolId) {
-      const tool = await Tools().get(log.toolId);
-      return tool;
-    }
-  });
-
-  const subWorkflow = usePromise(
-    async () => {
-      if (log.toolId === runWorkflowToolId) {
-        return Workflows().get(log.toolArgs?.workflowId);
-      }
-    },
-    undefined,
-    [log.toolId, log.toolArgs?.workflowId],
-  );
-
-  const assistant = usePromise(
-    async () => {
-      if (log.toolArgs?.assistantId) {
-        return Assistants().get(log.toolArgs.assistantId);
-      }
-    },
-    undefined,
-    [log.toolArgs?.assistantId],
-  );
-
-  const rawJson = <pre>{JSON.stringify(log, null, 2)}</pre>;
-
-  let displayElement = rawJson;
-
-  if (log.logText) {
-    displayElement = (
-      <MarkdownWithMentions
-        content={[
-          "```",
-          log.logText,
-          log.instruction ? `Instruction: ${JSON.stringify(log.instruction, null, 2)}` : "",
-          "```",
-        ]
-          .filter((s) => s)
-          .join("\n")}
-      />
-    );
-  } else if (tool && subWorkflow) {
-    const toolMention = formatMention({ kind: "tool", id: tool.toolId, name: tool.name });
-    const workflowMention = formatMention({
-      kind: "workflow",
-      id: subWorkflow.workflowId,
-      name: subWorkflow.name,
-    });
-    const args = { ...log.toolArgs };
-    delete args.workflowId;
-    displayElement = (
-      <MarkdownWithMentions
-        content={[
-          "```",
-          `${workflowMention} via ${toolMention} (${log.toolRunTimeMs ?? ""}ms)`,
-          `Args: ${JSON.stringify(args, null, 2)}`,
-          "```",
-        ]
-          .filter((s) => s)
-          .join("\n")}
-      />
-    );
-  } else if (tool?.isAssistantRunner) {
-    const assistantId = log.toolArgs?.assistantId;
-    const assistantMention = formatMention({
-      kind: "assistant",
-      id: assistantId,
-      name: assistant?.name || assistantId || "",
-    });
-    const toolMention = formatMention({ kind: "tool", id: tool.toolId, name: tool.name ?? "" });
-    const args = { ...log.toolArgs };
-    delete args.assistantId;
-    displayElement = (
-      <MarkdownWithMentions
-        content={[
-          "```",
-          `${assistantMention} via ${toolMention} (${log.toolRunTimeMs}ms)`,
-          `Args: ${JSON.stringify(args, null, 2)}`,
-          "```",
-        ]
-          .filter((s) => s)
-          .join("\n")}
-      />
-    );
-  } else if (log.toolId) {
-    const toolMention = formatMention({
-      kind: "tool",
-      id: log.toolId,
-      name: tool?.name || log.toolId,
-    });
-    displayElement = (
-      <MarkdownWithMentions
-        content={[
-          "```",
-          log.logText && `Log Text: ${log.logText}`,
-          `${toolMention} (${log.toolRunTimeMs}ms)`,
-          `Args: ${JSON.stringify(log.toolArgs, null, 2)}`,
-          "```",
-        ]
-          .filter((s) => s)
-          .join("\n")}
-      />
-    );
-  }
-
-  const isRawView = displayElement === rawJson;
-
-  return (
-    <div
-      style={{ position: "relative" }}
-      onMouseEnter={() => showMenu(true)}
-      onMouseLeave={() => showMenu(false)}
-    >
-      {!isRawView && <LogMenu showMenu={showMenu} showRawJson={showRawJson} />}
-
-      {showRawJson() ? rawJson : displayElement}
-    </div>
-  );
-};
-
-const LogMenu = (props: { showMenu: Observable<boolean>; showRawJson: Observable<boolean> }) => {
-  const { showMenu, showRawJson } = props;
-  useObservable(showMenu);
-
-  return (
-    <>
-      {showMenu() && (
-        <div className="message-hover-menu">
-          <button className="btn btn-lg m-1 p-1" onClick={() => showRawJson(!showRawJson())}>
-            {showRawJson() ? (
-              <i className="bi bi-filetype-md"></i>
-            ) : (
-              <i className="bi bi-filetype-json"></i>
-            )}
-          </button>
-        </div>
-      )}
-    </>
-  );
-};