@peers-app/peers-ui 0.0.14

package/dist/components/markdown-with-mentions.js

@@ -0,0 +1,140 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MarkdownWithMentions = void 0;
+const react_1 = __importDefault(require("react"));
+// import { FileListDisplay } from './file-list-display';
+const peers_sdk_1 = require("@peers-app/peers-sdk");
+const react_markdown_1 = __importDefault(require("react-markdown"));
+const remark_gfm_1 = __importDefault(require("remark-gfm"));
+const mention_configs_1 = require("../mention-configs");
+// Custom Link Renderer
+const LinkRenderer = (props) => {
+    const { href } = props;
+    return (react_1.default.createElement("a", { href: href, onClick: (e) => {
+            if (href?.startsWith('http')) {
+                e.preventDefault();
+                peers_sdk_1.rpcServerCalls.openLinkInBrowser(href);
+            }
+        } }, props.children));
+};
+const processTextWithMentions = (text) => {
+    const parts = [];
+    let lastIndex = 0;
+    let match;
+    let cnt = 0;
+    const regex = (0, peers_sdk_1.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 = {
+            kind,
+            name,
+            id,
+        };
+        const style = { cursor: 'pointer' };
+        if (name.length < 20) {
+            style.whiteSpace = 'nowrap';
+        }
+        const mentionConfig = mention_configs_1.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 && react_1.default.createElement("i", { className: `pe-1 ${mentionConfig.iconClass}` }) ||
+            react_1.default.createElement("i", { className: `pe-1 bi bi-question` });
+        parts.push(react_1.default.createElement("a", { key: cnt, className: mentionClass, "data-kind": kind, "data-id": id, style: style, href: href, onClick: onClick && (() => onClick(data)) },
+            icon,
+            data.name));
+        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) => {
+    // @ts-ignore
+    return ({ node, ...props }) => {
+        return (react_1.default.createElement(Element, { ...props }, react_1.default.Children.map(props.children, child => {
+            if (typeof child === 'string') {
+                return processTextWithMentions(child);
+            }
+            return child;
+        })));
+    };
+};
+const MarkdownWithMentions = ({ 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 (react_1.default.createElement("div", { className: 'markdown' },
+        react_1.default.createElement(react_markdown_1.default, { remarkPlugins: [remark_gfm_1.default], 
+            // @ts-ignore
+            components: components }, content)));
+};
+exports.MarkdownWithMentions = MarkdownWithMentions;

package/dist/components/message-logs/message-logs.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+interface MessageLogsProps {
+    messageId: string;
+}
+export declare const MessageLogs: ({ messageId }: MessageLogsProps) => false | React.JSX.Element;
+export {};

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

@@ -0,0 +1,307 @@
+"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 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 hooks_1 = require("../../hooks");
+const markdown_with_mentions_1 = require("../markdown-with-mentions");
+const MessageLogs = ({ messageId }) => {
+    const workflowRunIds = (0, hooks_1.useObservableState)([]);
+    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 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) } });
+        logIds(workflowLogs.map((l) => l.workflowLogId));
+    }
+    (0, react_1.useEffect)(() => {
+        (0, peers_sdk_1.WorkflowRuns)().list({ parentMessageId: messageId }).then(async (_runs) => {
+            if (!_runs.length && !runs().length) {
+                return;
+            }
+            runs(_runs);
+            refreshLogCount();
+        });
+        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') {
+                    _runs.push(workflowRun);
+                }
+                runs(_runs);
+                refreshLogCount();
+            }
+        });
+        const subLogs = (0, peers_sdk_1.WorkflowLogs)().dataChanged.subscribe(async (evt) => {
+            const workflowLog = evt.dataObject;
+            if (runs().map((r) => r.workflowRunId).includes(workflowLog.workflowRunId)) {
+                refreshLogCount();
+            }
+        });
+        return () => {
+            subRuns.unsubscribe();
+            subLogs.unsubscribe();
+        };
+    }, []);
+    (0, react_1.useEffect)(() => {
+        let disposed = false;
+        function upsertRunIds(ids) {
+            let runIds = [...workflowRunIds(), ...ids];
+            runIds = (0, lodash_1.uniq)(runIds);
+            runIds = runIds.sort();
+            workflowRunIds(runIds);
+        }
+        (0, peers_sdk_1.WorkflowRuns)().list({ parentMessageId: messageId }).then(async (runs) => {
+            if (disposed) {
+                return;
+            }
+            upsertRunIds(runs.map((r) => r.workflowRunId));
+        });
+        const sub = (0, peers_sdk_1.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 = (0, lodash_1.uniq)(runIds);
+            runIds = (0, lodash_1.sortBy)(runIds);
+            workflowRunIds(runIds);
+        });
+        return () => {
+            disposed = true;
+            sub.unsubscribe();
+        };
+    }, [messageId]);
+    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 })))));
+};
+exports.MessageLogs = MessageLogs;
+const ShowLogsLink = (props) => {
+    const { showLogs, logIds, runs } = props;
+    (0, hooks_1.useObservable)(logIds);
+    (0, hooks_1.useObservable)(runs);
+    (0, hooks_1.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 (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);
+                    }
+                });
+            } }))));
+};
+const AllMessageLogs = (props) => {
+    const { logIds, runs } = props;
+    const runLogs = (0, hooks_1.useObservableState)([]);
+    (0, hooks_1.useObservable)(runLogs);
+    (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);
+            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) => {
+            if (disposed) {
+                return;
+            }
+            setLogs([...logs, ...runLogs()]);
+        });
+        const sub = (0, peers_sdk_1.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 (react_1.default.createElement(RenderNextLog, { logs: runLogs(), runs: runs }));
+};
+const RenderNextLog = (props) => {
+    let { logs, runs } = props;
+    if (!logs.length) {
+        return false;
+    }
+    logs = (0, lodash_1.orderBy)(logs, (l) => l.logDT);
+    logs = (0, lodash_1.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 (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 LogDisplay = (props) => {
+    const { log } = props;
+    const [showMenu] = (0, react_1.useState)(() => (0, peers_sdk_1.observable)(false));
+    const showRawJson = (0, hooks_1.useObservableState)(false);
+    const tool = (0, hooks_1.usePromise)(async () => {
+        if (log.toolId) {
+            const tool = await (0, peers_sdk_1.Tools)().get(log.toolId);
+            return tool;
+        }
+    });
+    const subWorkflow = (0, hooks_1.usePromise)(async () => {
+        if (log.toolId === peers_sdk_1.runWorkflowToolId) {
+            return (0, peers_sdk_1.Workflows)().get(log.toolArgs?.workflowId);
+        }
+    }, undefined, [log.toolId, log.toolArgs?.workflowId]);
+    const assistant = (0, hooks_1.usePromise)(async () => {
+        if (log.toolArgs?.assistantId) {
+            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)));
+    let displayElement = rawJson;
+    if (log.logText) {
+        displayElement = (react_1.default.createElement(markdown_with_mentions_1.MarkdownWithMentions, { content: [
+                "```",
+                log.logText,
+                log.instruction ? `Instruction: ${JSON.stringify(log.instruction, null, 2)}` : '',
+                "```",
+            ].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 args = { ...log.toolArgs };
+        delete args.workflowId;
+        displayElement = (react_1.default.createElement(markdown_with_mentions_1.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 = (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: [
+                "```",
+                `${assistantMention} via ${toolMention} (${log.toolRunTimeMs}ms)`,
+                `Args: ${JSON.stringify(args, null, 2)}`,
+                "```",
+            ].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: [
+                "```",
+                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 (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));
+};
+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" }))))));
+};

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

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

package/dist/components/messages/avatar.js

@@ -0,0 +1,65 @@
+"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 peers_sdk_1 = require("@peers-app/peers-sdk");
+const Avatar = (props) => {
+    const { userId, setUser: parentSetUser, assistantId } = props;
+    const user = (0, hooks_1.usePromise)(async () => {
+        const user = await (0, peers_sdk_1.Users)().get(userId, { useCache: true });
+        if (user && parentSetUser) {
+            parentSetUser(user);
+        }
+        return user;
+    });
+    const assistant = (0, hooks_1.usePromise)(async () => {
+        if (assistantId) {
+            return (0, peers_sdk_1.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 (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()))));
+};
+exports.Avatar = Avatar;
+function stringToHslColor(str = '', saturation = 50, lightness = 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 + '%)';
+}

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

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