@peers-app/peers-ui 0.0.14

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

@@ -0,0 +1,183 @@
+import React from 'react';
+// import { FileListDisplay } from './file-list-display';
+import { IMentionData, mentionRegex, rpcServerCalls } from "@peers-app/peers-sdk";
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import { mentionConfigs } from '../mention-configs';
+
+// Custom Link Renderer
+const LinkRenderer = (props: { href?: string, children?: any }) => {
+  const { href } = props;
+  return (
+    <a
+      href={href}
+      onClick={(e) => {
+        if (href?.startsWith('http')) {
+          e.preventDefault();
+          rpcServerCalls.openLinkInBrowser(href);
+        }
+      }}
+    >
+      {props.children}
+    </a>
+  );
+};
+
+const processTextWithMentions = (text: string) => {
+  const parts: any[] = [];
+  let lastIndex = 0;
+  let match;
+  let cnt = 0;
+
+  const regex = mentionRegex();
+  while ((match = regex.exec(text)) !== 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 = { cursor: 'pointer' } as any;
+    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;
+  }
+
+  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: any) => {
+  // @ts-ignore
+  return ({ node, ...props }) => {
+    return (
+      <Element {...props}>
+        {React.Children.map(props.children, child => {
+          if (typeof child === 'string') {
+            return processTextWithMentions(child);
+          }
+          return child;
+        })}
+      </Element>
+    );
+  };
+};
+
+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-ignore
+        components={components}
+      >
+        {content}
+      </ReactMarkdown>
+    </div>
+  )
+};

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

@@ -0,0 +1,406 @@
+import { Assistants, formatMention, IWorkflowLog, IWorkflowRun, Observable, observable, runWorkflowToolId, Tools, WorkflowLogs, WorkflowRuns, Workflows } from "@peers-app/peers-sdk";
+import { orderBy, sortBy, uniq, uniqBy } from 'lodash';
+import moment from 'moment';
+import React, { useEffect, useState } from 'react';
+import { useObservable, useObservableState, usePromise } from "../../hooks";
+import { MarkdownWithMentions } from '../markdown-with-mentions';
+
+interface MessageLogsProps {
+  messageId: string;
+}
+
+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[]));
+
+  async function refreshLogCount() {
+    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));    
+  }
+
+  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) {
+        let _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();
+    }
+  }, []);
+
+  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]);
+
+  if (!workflowRunIds().length) {
+    return false;
+  }
+
+  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} />
+      {showLogs() && (
+        <div>
+          <AllMessageLogs logIds={logIds} runs={runs} />
+        </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;
+      }
+      let logs = runLogs().filter((log) => log.workflowLogId !== workflowLog.workflowLogId);
+      if (evt.op !== 'delete') {
+        logs.push(workflowLog);
+      }
+      setLogs(logs);
+    });
+
+    return () => {
+      disposed = true;
+      sub.unsubscribe();
+    }
+  }, []);
+
+  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()!;
+  const runsIdsInside = [nextLog.workflowRunId];
+  while (true) {
+    let 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 && 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>
+      )}
+    </>
+  )
+}

package/src/components/messages/avatar.tsx

@@ -0,0 +1,95 @@
+import React from 'react';
+import { usePromise } from '../../hooks';
+import { IUser, Users, Assistants } from "@peers-app/peers-sdk";
+
+interface IProps {
+  userId: string,
+  assistantId?: string, 
+  setUser?: (user: IUser) => any
+}
+
+export const Avatar = (props: IProps) => {
+  const { userId, setUser: parentSetUser, assistantId } = props;
+
+  const user = usePromise(async () => {
+    const user = await Users().get(userId, { useCache: true });
+    if (user && parentSetUser) {
+      parentSetUser(user);
+    }
+    return user;
+  });
+  const assistant = usePromise(async () => {
+    if (assistantId) {
+      return Assistants().get(assistantId, { useCache: true});
+    }
+  }, undefined, [assistantId]);
+
+  let initials = "?"
+
+  let name = assistant?.name || user?.name;
+  if (user) {
+    if (!name) {
+      initials = "!"
+    } else {
+      const words = name.split(' ');
+      const first = words[0];
+      const last = words.length > 1 ? words[words.length-1] : words[0][1];
+      initials = first[0] + last[0];      
+    }
+  }
+
+  // TODO if user.avatarImage then get and show that
+
+  let backgroundColor = name ? stringToHslColor(name) : stringToHslColor('', 100, 100);
+  if (assistant) {
+    // backgroundColor = stringToHslColor(name || '', 100, 100);
+    backgroundColor = stringToHslColor('', 0, 70);
+  }
+
+  return (
+    <div className="position-relative">
+      <div
+        className="rounded-circle d-flex justify-content-center align-items-center fs-4 border"
+        style={{
+          width: '40px',
+          height: '40px',
+          color: 'white',
+          backgroundColor,
+        }}
+      >
+        <span style={{ fontSize: '15pt' }}>
+          {assistant && <i className="bi bi-person-fill-gear"></i>}
+          {!assistant && initials.toUpperCase()}
+          {/* {assistant ? "ai" : initials.toUpperCase()} */}
+        </span>
+      </div>
+      {/* Keep this here in case we want to show the assistant icon */}
+      {/* {assistantId && (
+        <i
+          className="bi bi-gear-fill position-absolute"
+          style={{
+            bottom: '0',
+            right: '0',
+            fontSize: '12px',
+            backgroundColor: 'white',
+            borderRadius: '50%',
+            padding: '2px',
+          }}
+          title={`${user?.name}'s assistant`}
+        ></i>
+      )} */}
+    </div>
+  );
+}
+
+export function stringToHslColor(str: string = '', saturation: number = 50, lightness: number = 40) {
+  saturation = saturation % 100;
+  lightness = lightness % 100;
+  var hash = 0;
+  for (var i = 0; i < str.length; i++) {
+    hash = str.charCodeAt(i) + ((hash << 5) - hash);
+  }
+
+  var h = hash % 360;
+  return 'hsl('+h+', '+saturation+'%, '+lightness+'%)';
+}