@peers-app/peers-ui 0.14.0 → 0.15.0

package/dist/components/message-logs/message-logs.js

@@ -1,46 +1,14 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MessageLogs = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
 const peers_sdk_1 = require("@peers-app/peers-sdk");
 const lodash_1 = require("lodash");
 const moment_1 = __importDefault(require("moment"));
-const react_1 = __importStar(require("react"));
+const react_1 = require("react");
 const hooks_1 = require("../../hooks");
 const markdown_with_mentions_1 = require("../markdown-with-mentions");
 const MessageLogs = ({ messageId }) => {
@@ -48,13 +16,17 @@ const MessageLogs = ({ messageId }) => {
     const showLogs = (0, hooks_1.useObservableState)(false);
     const [runs] = (0, react_1.useState)(() => (0, peers_sdk_1.observable)([]));
     const [logIds] = (0, react_1.useState)(() => (0, peers_sdk_1.observable)([]));
-    async function refreshLogCount() {
+    const refreshLogCount = (0, react_1.useCallback)(async () => {
         const workflowRuns = await (0, peers_sdk_1.WorkflowRuns)().list({ parentMessageId: messageId });
-        const workflowLogs = await (0, peers_sdk_1.WorkflowLogs)().list({ workflowRunId: { $in: workflowRuns.map((r) => r.workflowRunId) } });
+        const workflowLogs = await (0, peers_sdk_1.WorkflowLogs)().list({
+            workflowRunId: { $in: workflowRuns.map((r) => r.workflowRunId) },
+        });
         logIds(workflowLogs.map((l) => l.workflowLogId));
-    }
+    }, [messageId, logIds]);
     (0, react_1.useEffect)(() => {
-        (0, peers_sdk_1.WorkflowRuns)().list({ parentMessageId: messageId }).then(async (_runs) => {
+        (0, peers_sdk_1.WorkflowRuns)()
+            .list({ parentMessageId: messageId })
+            .then(async (_runs) => {
             if (!_runs.length && !runs().length) {
                 return;
             }
@@ -64,8 +36,8 @@ const MessageLogs = ({ messageId }) => {
         const subRuns = (0, peers_sdk_1.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') {
+                const _runs = runs().filter((r) => r.workflowRunId !== workflowRun.workflowRunId);
+                if (evt.op !== "delete") {
                     _runs.push(workflowRun);
                 }
                 runs(_runs);
@@ -74,7 +46,9 @@ const MessageLogs = ({ messageId }) => {
         });
         const subLogs = (0, peers_sdk_1.WorkflowLogs)().dataChanged.subscribe(async (evt) => {
             const workflowLog = evt.dataObject;
-            if (runs().map((r) => r.workflowRunId).includes(workflowLog.workflowRunId)) {
+            if (runs()
+                .map((r) => r.workflowRunId)
+                .includes(workflowLog.workflowRunId)) {
                 refreshLogCount();
             }
         });
@@ -82,7 +56,7 @@ const MessageLogs = ({ messageId }) => {
             subRuns.unsubscribe();
             subLogs.unsubscribe();
         };
-    }, []);
+    }, [messageId, refreshLogCount, runs]);
     (0, react_1.useEffect)(() => {
         let disposed = false;
         function upsertRunIds(ids) {
@@ -91,7 +65,9 @@ const MessageLogs = ({ messageId }) => {
             runIds = runIds.sort();
             workflowRunIds(runIds);
         }
-        (0, peers_sdk_1.WorkflowRuns)().list({ parentMessageId: messageId }).then(async (runs) => {
+        (0, peers_sdk_1.WorkflowRuns)()
+            .list({ parentMessageId: messageId })
+            .then(async (runs) => {
             if (disposed) {
                 return;
             }
@@ -103,7 +79,7 @@ const MessageLogs = ({ messageId }) => {
                 return;
             }
             let runIds = workflowRunIds().filter((id) => id !== workflowRun.workflowRunId);
-            if (evt.op !== 'delete') {
+            if (evt.op !== "delete") {
                 runIds.push(workflowRun.workflowRunId);
             }
             runIds = (0, lodash_1.uniq)(runIds);
@@ -114,15 +90,11 @@ const MessageLogs = ({ messageId }) => {
             disposed = true;
             sub.unsubscribe();
         };
-    }, [messageId]);
+    }, [messageId, workflowRunIds]);
     if (!workflowRunIds().length) {
         return false;
     }
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        "\u00A0",
-        react_1.default.createElement(ShowLogsLink, { logIds: logIds, showLogs: showLogs, runs: runs }),
-        showLogs() && (react_1.default.createElement("div", null,
-            react_1.default.createElement(AllMessageLogs, { logIds: logIds, runs: runs })))));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["\u00A0", (0, jsx_runtime_1.jsx)(ShowLogsLink, { logIds: logIds, showLogs: showLogs, runs: runs }), showLogs() && ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(AllMessageLogs, { logIds: logIds, runs: runs }) }))] }));
 };
 exports.MessageLogs = MessageLogs;
 const ShowLogsLink = (props) => {
@@ -133,26 +105,16 @@ const ShowLogsLink = (props) => {
     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 (react_1.default.createElement("div", { className: "d-inline small" },
-        (runsInProgress.length > 0) && (react_1.default.createElement("div", { className: `spinner-grow spinner-grow-sm text-secondary`, role: "status", style: {
-                width: '0.7rem',
-                height: '0.7rem',
-            } },
-            react_1.default.createElement("span", { className: "visually-hidden" }, "Loading..."))),
-        ((runsInProgress.length + runsInError.length + runsScheduled.length) < 1) && (react_1.default.createElement("i", { className: "bi bi-check-circle text-success" })),
-        runsInError.length > 0 && (react_1.default.createElement("i", { className: "bi bi-x-circle text-danger" })),
-        runsScheduled.length > 0 && (react_1.default.createElement("i", { className: "bi bi-clock text-warning", title: `Scheduled for ${(0, moment_1.default)(runsScheduled[0].scheduleDT).calendar()}` })),
-        react_1.default.createElement("button", { className: "btn btn-sm btn-link m-1 fw-lighter pt-0", onClick: () => showLogs(!showLogs()), tabIndex: -1 },
-            react_1.default.createElement("span", null,
-                !showLogs() && (logIds().length === 1 ? '1 log' : logIds().length + ' logs'),
-                showLogs() && (logIds().length === 1 ? 'hide 1 log' : `hide ${logIds().length} logs`))),
-        (runsInProgress.length + runsScheduled.length) > 0 && (react_1.default.createElement("i", { className: "bi bi-stop-circle", style: { cursor: 'pointer' }, onClick: () => {
-                runs().forEach((r) => {
-                    if (!r.completedAt && !r.inErrorState) {
-                        (0, peers_sdk_1.WorkflowRuns)().haltRun(r.workflowRunId);
-                    }
-                });
-            } }))));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "d-inline small", children: [runsInProgress.length > 0 && ((0, jsx_runtime_1.jsx)("div", { className: `spinner-grow spinner-grow-sm text-secondary`, role: "status", style: {
+                    width: "0.7rem",
+                    height: "0.7rem",
+                }, children: (0, jsx_runtime_1.jsx)("span", { className: "visually-hidden", children: "Loading..." }) })), runsInProgress.length + runsInError.length + runsScheduled.length < 1 && ((0, jsx_runtime_1.jsx)("i", { className: "bi bi-check-circle text-success" })), runsInError.length > 0 && (0, jsx_runtime_1.jsx)("i", { className: "bi bi-x-circle text-danger" }), runsScheduled.length > 0 && ((0, jsx_runtime_1.jsx)("i", { className: "bi bi-clock text-warning", title: `Scheduled for ${(0, moment_1.default)(runsScheduled[0].scheduleDT).calendar()}` })), (0, jsx_runtime_1.jsx)("button", { className: "btn btn-sm btn-link m-1 fw-lighter pt-0", onClick: () => showLogs(!showLogs()), tabIndex: -1, children: (0, jsx_runtime_1.jsxs)("span", { children: [!showLogs() && (logIds().length === 1 ? "1 log" : `${logIds().length} logs`), showLogs() && (logIds().length === 1 ? "hide 1 log" : `hide ${logIds().length} logs`)] }) }), runsInProgress.length + runsScheduled.length > 0 && ((0, jsx_runtime_1.jsx)("i", { className: "bi bi-stop-circle", style: { cursor: "pointer" }, onClick: () => {
+                    runs().forEach((r) => {
+                        if (!r.completedAt && !r.inErrorState) {
+                            (0, peers_sdk_1.WorkflowRuns)().haltRun(r.workflowRunId);
+                        }
+                    });
+                } }))] }));
 };
 const AllMessageLogs = (props) => {
     const { logIds, runs } = props;
@@ -161,13 +123,14 @@ const AllMessageLogs = (props) => {
     (0, react_1.useEffect)(() => {
         let disposed = false;
         function setLogs(logs) {
-            logs = (0, lodash_1.uniqBy)(logs, l => l.workflowLogId);
-            logs = (0, lodash_1.sortBy)(logs, l => l.logDT);
+            logs = (0, lodash_1.uniqBy)(logs, (l) => l.workflowLogId);
+            logs = (0, lodash_1.sortBy)(logs, (l) => l.logDT);
             runLogs(logs);
             logIds((0, lodash_1.uniq)([...logIds(), ...logs.map((l) => l.workflowLogId)]));
         }
-        ;
-        (0, peers_sdk_1.WorkflowLogs)().list({ workflowLogId: { $in: logIds() } }).then(async (logs) => {
+        (0, peers_sdk_1.WorkflowLogs)()
+            .list({ workflowLogId: { $in: logIds() } })
+            .then(async (logs) => {
             if (disposed) {
                 return;
             }
@@ -178,8 +141,8 @@ const AllMessageLogs = (props) => {
             if (disposed || !logIds().includes(workflowLog.workflowLogId)) {
                 return;
             }
-            let logs = runLogs().filter((log) => log.workflowLogId !== workflowLog.workflowLogId);
-            if (evt.op !== 'delete') {
+            const logs = runLogs().filter((log) => log.workflowLogId !== workflowLog.workflowLogId);
+            if (evt.op !== "delete") {
                 logs.push(workflowLog);
             }
             setLogs(logs);
@@ -188,11 +151,11 @@ const AllMessageLogs = (props) => {
             disposed = true;
             sub.unsubscribe();
         };
-    }, []);
+    }, [logIds, runLogs]);
     if (!runLogs().length) {
         return false;
     }
-    return (react_1.default.createElement(RenderNextLog, { logs: runLogs(), runs: runs }));
+    return (0, jsx_runtime_1.jsx)(RenderNextLog, { logs: runLogs(), runs: runs });
 };
 const RenderNextLog = (props) => {
     let { logs, runs } = props;
@@ -202,10 +165,15 @@ const RenderNextLog = (props) => {
     logs = (0, lodash_1.orderBy)(logs, (l) => l.logDT);
     logs = (0, lodash_1.orderBy)(logs, (l) => l.workflowRunId);
     const nextLog = logs.shift();
+    if (!nextLog) {
+        return false;
+    }
     const runsIdsInside = [nextLog.workflowRunId];
     while (true) {
-        let subRunIds = runs().filter((r) => runsIdsInside.includes(r.parentWorkflowRunId ?? '')
-            && !runsIdsInside.includes(r.workflowRunId)).map((r) => r.workflowRunId);
+        const subRunIds = runs()
+            .filter((r) => runsIdsInside.includes(r.parentWorkflowRunId ?? "") &&
+            !runsIdsInside.includes(r.workflowRunId))
+            .map((r) => r.workflowRunId);
         if (!subRunIds.length) {
             break;
         }
@@ -214,18 +182,10 @@ const RenderNextLog = (props) => {
     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 (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("div", { className: 'border-start rounded' },
-            react_1.default.createElement(LogDisplay, { log: nextLog }),
-            react_1.default.createElement("div", { className: 'ms-3' },
-                react_1.default.createElement(RenderNextLog, { logs: logsInside, runs: runs })),
-            result && (react_1.default.createElement(markdown_with_mentions_1.MarkdownWithMentions, { content: [
-                    "```",
-                    `Result: ${result}`,
-                    "```",
-                ].filter(s => s).join('\n') }))),
-        logsAfter.length > 0 && (react_1.default.createElement(RenderNextLog, { logs: logsAfter, runs: runs }))));
+    const result = nextLog.resultObject
+        ? JSON.stringify(nextLog.resultObject, null, 2)
+        : nextLog.result;
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "border-start rounded", children: [(0, jsx_runtime_1.jsx)(LogDisplay, { log: nextLog }), (0, jsx_runtime_1.jsx)("div", { className: "ms-3", children: (0, jsx_runtime_1.jsx)(RenderNextLog, { logs: logsInside, runs: runs }) }), result && ((0, jsx_runtime_1.jsx)(markdown_with_mentions_1.MarkdownWithMentions, { content: ["```", `Result: ${result}`, "```"].filter((s) => s).join("\n") }))] }), logsAfter.length > 0 && (0, jsx_runtime_1.jsx)(RenderNextLog, { logs: logsAfter, runs: runs })] }));
 };
 const LogDisplay = (props) => {
     const { log } = props;
@@ -247,61 +207,76 @@ const LogDisplay = (props) => {
             return (0, peers_sdk_1.Assistants)().get(log.toolArgs.assistantId);
         }
     }, undefined, [log.toolArgs?.assistantId]);
-    const rawJson = (react_1.default.createElement("pre", null, JSON.stringify(log, null, 2)));
+    const rawJson = (0, jsx_runtime_1.jsx)("pre", { children: JSON.stringify(log, null, 2) });
     let displayElement = rawJson;
     if (log.logText) {
-        displayElement = (react_1.default.createElement(markdown_with_mentions_1.MarkdownWithMentions, { content: [
+        displayElement = ((0, jsx_runtime_1.jsx)(markdown_with_mentions_1.MarkdownWithMentions, { content: [
                 "```",
                 log.logText,
-                log.instruction ? `Instruction: ${JSON.stringify(log.instruction, null, 2)}` : '',
+                log.instruction ? `Instruction: ${JSON.stringify(log.instruction, null, 2)}` : "",
                 "```",
-            ].filter(s => s).join('\n') }));
+            ]
+                .filter((s) => s)
+                .join("\n") }));
     }
     else if (tool && subWorkflow) {
-        const toolMention = (0, peers_sdk_1.formatMention)({ kind: 'tool', id: tool.toolId, name: tool.name });
-        const workflowMention = (0, peers_sdk_1.formatMention)({ kind: 'workflow', id: subWorkflow.workflowId, name: subWorkflow.name });
+        const toolMention = (0, peers_sdk_1.formatMention)({ kind: "tool", id: tool.toolId, name: tool.name });
+        const workflowMention = (0, peers_sdk_1.formatMention)({
+            kind: "workflow",
+            id: subWorkflow.workflowId,
+            name: subWorkflow.name,
+        });
         const args = { ...log.toolArgs };
         delete args.workflowId;
-        displayElement = (react_1.default.createElement(markdown_with_mentions_1.MarkdownWithMentions, { content: [
+        displayElement = ((0, jsx_runtime_1.jsx)(markdown_with_mentions_1.MarkdownWithMentions, { content: [
                 "```",
-                `${workflowMention} via ${toolMention} (${log.toolRunTimeMs ?? ''}ms)`,
+                `${workflowMention} via ${toolMention} (${log.toolRunTimeMs ?? ""}ms)`,
                 `Args: ${JSON.stringify(args, null, 2)}`,
                 "```",
-            ].filter(s => s).join('\n') }));
+            ]
+                .filter((s) => s)
+                .join("\n") }));
     }
-    else if (tool && tool.isAssistantRunner) {
+    else if (tool?.isAssistantRunner) {
         const assistantId = log.toolArgs?.assistantId;
-        const assistantMention = (0, peers_sdk_1.formatMention)({ kind: 'assistant', id: assistantId, name: assistant?.name || assistantId || '' });
-        const toolMention = (0, peers_sdk_1.formatMention)({ kind: 'tool', id: tool.toolId, name: tool.name ?? '' });
+        const assistantMention = (0, peers_sdk_1.formatMention)({
+            kind: "assistant",
+            id: assistantId,
+            name: assistant?.name || assistantId || "",
+        });
+        const toolMention = (0, peers_sdk_1.formatMention)({ kind: "tool", id: tool.toolId, name: tool.name ?? "" });
         const args = { ...log.toolArgs };
         delete args.assistantId;
-        displayElement = (react_1.default.createElement(markdown_with_mentions_1.MarkdownWithMentions, { content: [
+        displayElement = ((0, jsx_runtime_1.jsx)(markdown_with_mentions_1.MarkdownWithMentions, { content: [
                 "```",
                 `${assistantMention} via ${toolMention} (${log.toolRunTimeMs}ms)`,
                 `Args: ${JSON.stringify(args, null, 2)}`,
                 "```",
-            ].filter(s => s).join('\n') }));
+            ]
+                .filter((s) => s)
+                .join("\n") }));
     }
     else if (log.toolId) {
-        const toolMention = (0, peers_sdk_1.formatMention)({ kind: 'tool', id: log.toolId, name: tool?.name || log.toolId });
-        displayElement = (react_1.default.createElement(markdown_with_mentions_1.MarkdownWithMentions, { content: [
+        const toolMention = (0, peers_sdk_1.formatMention)({
+            kind: "tool",
+            id: log.toolId,
+            name: tool?.name || log.toolId,
+        });
+        displayElement = ((0, jsx_runtime_1.jsx)(markdown_with_mentions_1.MarkdownWithMentions, { content: [
                 "```",
                 log.logText && `Log Text: ${log.logText}`,
                 `${toolMention} (${log.toolRunTimeMs}ms)`,
                 `Args: ${JSON.stringify(log.toolArgs, null, 2)}`,
                 "```",
-            ].filter(s => s).join('\n') }));
+            ]
+                .filter((s) => s)
+                .join("\n") }));
     }
     const isRawView = displayElement === rawJson;
-    return (react_1.default.createElement("div", { style: { position: 'relative' }, onMouseEnter: () => showMenu(true), onMouseLeave: () => showMenu(false) },
-        !isRawView && (react_1.default.createElement(LogMenu, { showMenu: showMenu, showRawJson: showRawJson })),
-        showRawJson() ? rawJson : displayElement));
+    return ((0, jsx_runtime_1.jsxs)("div", { style: { position: "relative" }, onMouseEnter: () => showMenu(true), onMouseLeave: () => showMenu(false), children: [!isRawView && (0, jsx_runtime_1.jsx)(LogMenu, { showMenu: showMenu, showRawJson: showRawJson }), showRawJson() ? rawJson : displayElement] }));
 };
 const LogMenu = (props) => {
     const { showMenu, showRawJson } = props;
     (0, hooks_1.useObservable)(showMenu);
-    return (react_1.default.createElement(react_1.default.Fragment, null, showMenu() && (react_1.default.createElement("div", { className: "message-hover-menu" },
-        react_1.default.createElement("button", { className: "btn btn-lg m-1 p-1", onClick: () => showRawJson(!showRawJson()) }, showRawJson()
-            ? react_1.default.createElement("i", { className: "bi bi-filetype-md" })
-            : react_1.default.createElement("i", { className: "bi bi-filetype-json" }))))));
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: showMenu() && ((0, jsx_runtime_1.jsx)("div", { className: "message-hover-menu", children: (0, jsx_runtime_1.jsx)("button", { className: "btn btn-lg m-1 p-1", onClick: () => showRawJson(!showRawJson()), children: showRawJson() ? ((0, jsx_runtime_1.jsx)("i", { className: "bi bi-filetype-md" })) : ((0, jsx_runtime_1.jsx)("i", { className: "bi bi-filetype-json" })) }) })) }));
 };

package/dist/components/messages/avatar.d.ts

@@ -1,10 +1,9 @@
-import React from 'react';
-import { IUser } from "@peers-app/peers-sdk";
+import { type IUser } from "@peers-app/peers-sdk";
 interface IProps {
     userId: string;
     assistantId?: string;
-    setUser?: (user: IUser) => any;
+    setUser?: (user: IUser) => void;
 }
-export declare const Avatar: (props: IProps) => React.JSX.Element;
+export declare const Avatar: (props: IProps) => import("react/jsx-runtime").JSX.Element;
 export declare function stringToHslColor(str?: string, saturation?: number, lightness?: number): string;
 export {};

package/dist/components/messages/avatar.js

@@ -1,13 +1,10 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Avatar = void 0;
 exports.stringToHslColor = stringToHslColor;
-const react_1 = __importDefault(require("react"));
-const hooks_1 = require("../../hooks");
+const jsx_runtime_1 = require("react/jsx-runtime");
 const peers_sdk_1 = require("@peers-app/peers-sdk");
+const hooks_1 = require("../../hooks");
 const Avatar = (props) => {
     const { userId, setUser: parentSetUser, assistantId } = props;
     const user = (0, hooks_1.usePromise)(async () => {
@@ -30,38 +27,38 @@ const Avatar = (props) => {
         return peers_sdk_1.TrustLevel.Unknown;
     }, peers_sdk_1.TrustLevel.Unknown, [userId]);
     let initials = "?";
-    let name = assistant?.name || user?.name;
+    const name = assistant?.name || user?.name;
     if (user) {
         if (!name) {
             initials = "!";
         }
         else {
-            const words = name.split(' ');
+            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);
+    let backgroundColor = name ? stringToHslColor(name) : stringToHslColor("", 100, 100);
     if (assistant) {
         // backgroundColor = stringToHslColor(name || '', 100, 100);
-        backgroundColor = stringToHslColor('', 0, 70);
+        backgroundColor = stringToHslColor("", 0, 70);
     }
     // Get trust level config
     const getTrustLevelConfig = (level) => {
         const configs = [
-            { value: peers_sdk_1.TrustLevel.Self, color: '#198754', icon: 'bi-shield-fill-check' },
-            { value: peers_sdk_1.TrustLevel.Trusted, color: '#198754', icon: 'bi-shield-fill-check' },
-            { value: peers_sdk_1.TrustLevel.Known, color: '#0d6efd', icon: 'bi-shield-fill-check' },
-            { value: peers_sdk_1.TrustLevel.NewDevice, color: '#0dcaf0', icon: 'bi-shield-fill-plus' },
-            { value: peers_sdk_1.TrustLevel.NewUser, color: '#0dcaf0', icon: 'bi-shield-fill-plus' },
-            { value: peers_sdk_1.TrustLevel.Unknown, color: '#ffc107', icon: 'bi-shield-fill-exclamation' },
-            { value: peers_sdk_1.TrustLevel.Untrusted, color: '#dc3545', icon: 'bi-shield-fill-exclamation' },
-            { value: peers_sdk_1.TrustLevel.Malicious, color: '#dc3545', icon: 'bi-shield-fill-x' }
+            { value: peers_sdk_1.TrustLevel.Self, color: "#198754", icon: "bi-shield-fill-check" },
+            { value: peers_sdk_1.TrustLevel.Trusted, color: "#198754", icon: "bi-shield-fill-check" },
+            { value: peers_sdk_1.TrustLevel.Known, color: "#0d6efd", icon: "bi-shield-fill-check" },
+            { value: peers_sdk_1.TrustLevel.NewDevice, color: "#0dcaf0", icon: "bi-shield-fill-plus" },
+            { value: peers_sdk_1.TrustLevel.NewUser, color: "#0dcaf0", icon: "bi-shield-fill-plus" },
+            { value: peers_sdk_1.TrustLevel.Unknown, color: "#ffc107", icon: "bi-shield-fill-exclamation" },
+            { value: peers_sdk_1.TrustLevel.Untrusted, color: "#dc3545", icon: "bi-shield-fill-exclamation" },
+            { value: peers_sdk_1.TrustLevel.Malicious, color: "#dc3545", icon: "bi-shield-fill-x" },
         ];
         const sortedConfigs = configs.sort((a, b) => a.value - b.value);
-        let config = { color: '#6c757d', icon: 'bi-shield' };
+        let config = { color: "#6c757d", icon: "bi-shield" };
         for (const c of sortedConfigs) {
             if (level >= c.value) {
                 config = c;
@@ -73,38 +70,32 @@ const Avatar = (props) => {
         return config;
     };
     const trustConfig = getTrustLevelConfig(trustLevel || peers_sdk_1.TrustLevel.Unknown);
-    return (react_1.default.createElement("div", { className: "position-relative" },
-        react_1.default.createElement("div", { className: "rounded-circle d-flex justify-content-center align-items-center fs-4 border", style: {
-                width: '40px',
-                height: '40px',
-                color: 'white',
-                backgroundColor,
-            } },
-            react_1.default.createElement("span", { style: { fontSize: '15pt' } },
-                assistant && react_1.default.createElement("i", { className: "bi bi-person-fill-gear" }),
-                !assistant && initials.toUpperCase())),
-        !assistant && (react_1.default.createElement("div", { className: "position-absolute d-flex justify-content-center align-items-center", style: {
-                bottom: '-4px',
-                right: '0px',
-                width: '18px',
-                height: '18px',
-                // backgroundColor: 'white',
-                borderRadius: '50%',
-                // border: '1px solid #dee2e6',
-            } },
-            react_1.default.createElement("i", { className: trustConfig.icon, style: {
-                    fontSize: '12px',
-                    color: trustConfig.color,
-                } })))));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "position-relative", children: [(0, jsx_runtime_1.jsx)("div", { className: "rounded-circle d-flex justify-content-center align-items-center fs-4 border", style: {
+                    width: "40px",
+                    height: "40px",
+                    color: "white",
+                    backgroundColor,
+                }, children: (0, jsx_runtime_1.jsxs)("span", { style: { fontSize: "15pt" }, children: [assistant && (0, jsx_runtime_1.jsx)("i", { className: "bi bi-person-fill-gear" }), !assistant && initials.toUpperCase()] }) }), !assistant && ((0, jsx_runtime_1.jsx)("div", { className: "position-absolute d-flex justify-content-center align-items-center", style: {
+                    bottom: "-4px",
+                    right: "0px",
+                    width: "18px",
+                    height: "18px",
+                    // backgroundColor: 'white',
+                    borderRadius: "50%",
+                    // border: '1px solid #dee2e6',
+                }, children: (0, jsx_runtime_1.jsx)("i", { className: trustConfig.icon, style: {
+                        fontSize: "12px",
+                        color: trustConfig.color,
+                    } }) }))] }));
 };
 exports.Avatar = Avatar;
-function stringToHslColor(str = '', saturation = 50, lightness = 40) {
+function stringToHslColor(str = "", saturation = 50, lightness = 40) {
     saturation = saturation % 100;
     lightness = lightness % 100;
-    var hash = 0;
-    for (var i = 0; i < str.length; i++) {
+    let hash = 0;
+    for (let i = 0; i < str.length; i++) {
         hash = str.charCodeAt(i) + ((hash << 5) - hash);
     }
-    var h = hash % 360;
-    return 'hsl(' + h + ', ' + saturation + '%, ' + lightness + '%)';
+    const h = hash % 360;
+    return `hsl(${h}, ${saturation}%, ${lightness}%)`;
 }

package/dist/components/messages/channel-message-list.d.ts

@@ -1,14 +1,13 @@
-import { IMessage } from "@peers-app/peers-sdk";
-import React from 'react';
+import { type IMessage } from "@peers-app/peers-sdk";
 interface IProps {
-    height: any;
+    height: number | string;
     channelId: string;
     batchSize: number;
     effects?: {
-        pushMessage: (message: IMessage) => any;
+        pushMessage: (message: IMessage) => void;
     };
-    scrollChanged?: (isBottomInView: boolean) => any;
+    scrollChanged?: (isBottomInView: boolean) => void;
 }
-export declare const ChannelMessageList: (props: IProps) => React.JSX.Element;
+export declare const ChannelMessageList: (props: IProps) => import("react/jsx-runtime").JSX.Element;
 export declare function getMessages(batchSize: number, channelId: string, lastMessage: IMessage | undefined): Promise<IMessage[]>;
 export {};