@peers-app/peers-ui 0.0.14

package/dist/screens/groups/group-members.js

@@ -0,0 +1,315 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GroupMembersUI = void 0;
+const peers_sdk_1 = require("@peers-app/peers-sdk");
+const react_1 = __importDefault(require("react"));
+const loading_indicator_1 = require("../../components/loading-indicator");
+const typeahead_1 = require("../../components/typeahead");
+const hooks_1 = require("../../hooks");
+const GroupMembersUI = (props) => {
+    const { groupId, userContext } = props;
+    // Get the group's data context and tables
+    const groupDataContext = userContext.getDataContext(groupId);
+    const groupMembersTable = (0, peers_sdk_1.GroupMembers)(groupDataContext);
+    const groupUsersTable = (0, peers_sdk_1.Users)(groupDataContext);
+    // State for refreshing the component
+    const [refreshKey, setRefreshKey] = react_1.default.useState(0);
+    // Load group members with user details and check current user permissions
+    const membersData = (0, hooks_1.usePromise)(async () => {
+        const members = await groupMembersTable.list({ deleted: { $ne: true } });
+        // Get user details for each member using the group context
+        const membersWithUsers = await Promise.all(members.map(async (member) => {
+            const user = await (0, peers_sdk_1.getUserById)(member.userId, {
+                currentDataContext: groupDataContext
+            });
+            // If user found from external source, save to current group
+            if (user && user.source !== 'currentDataContext') {
+                try {
+                    const newGroupUser = await groupUsersTable.initRecord({
+                        userId: user.userId,
+                        name: user.name,
+                        publicKey: user.publicKey || '',
+                        publicBoxKey: user.publicBoxKey || '',
+                        trustLevel: peers_sdk_1.TrustLevel.NewUser
+                    });
+                    await groupUsersTable.save(newGroupUser);
+                    // Update user reference to reflect it's now in current group
+                    user.trustLevel = peers_sdk_1.TrustLevel.NewUser;
+                    user.source = 'currentDataContext';
+                }
+                catch (saveErr) {
+                    console.error('Failed to save user to group context:', saveErr);
+                }
+            }
+            return {
+                member,
+                user: user || null
+            };
+        }));
+        return membersWithUsers;
+    }, [], [groupId, refreshKey]);
+    // Check if current user has admin privileges in this group
+    const userPermissions = (0, hooks_1.usePromise)(async () => {
+        const currentUserContext = await (0, peers_sdk_1.getUserContext)();
+        const currentUserId = currentUserContext.userId();
+        const userRole = await (0, peers_sdk_1.getUserRole)(groupId, currentUserId);
+        return {
+            isMember: !!userRole,
+            canEdit: userRole >= peers_sdk_1.GroupMemberRole.Admin,
+            userRole: userRole,
+            currentUserId: currentUserId
+        };
+    }, undefined, [groupId]);
+    // Load group and founder information
+    const founderData = (0, hooks_1.usePromise)(async () => {
+        const groupsTable = (0, peers_sdk_1.Groups)(groupDataContext);
+        const group = await groupsTable.get(groupId) || await (0, peers_sdk_1.Groups)(userContext.userDataContext).get(groupId);
+        if (!group) {
+            return null;
+        }
+        // Try to get founder user details
+        const founderUser = await (0, peers_sdk_1.getUserById)(group.founderUserId, {
+            currentDataContext: groupDataContext
+        });
+        return {
+            group,
+            founderUser,
+            founderUserId: group.founderUserId
+        };
+    }, undefined, [groupId, refreshKey]);
+    const [newMemberRole, setNewMemberRole] = react_1.default.useState(peers_sdk_1.GroupMemberRole.Reader);
+    const [addingMember, setAddingMember] = react_1.default.useState(false);
+    const [selectedContacts, setSelectedContacts] = react_1.default.useState([]);
+    // Search function for typeahead
+    const searchContacts = async (query) => {
+        try {
+            const cursor = await (0, peers_sdk_1.usersCursor)({ name: { $matchWords: query } });
+            const results = [];
+            // Get first 10 results
+            for await (const contact of cursor) {
+                results.push(contact);
+                if (results.length >= 10)
+                    break;
+            }
+            // Filter out users who are already members
+            const currentMembers = membersData?.map(m => m.member.userId) || [];
+            const filteredResults = results.filter(contact => !currentMembers.includes(contact.userId));
+            return filteredResults.map(contact => ({
+                ...contact,
+                id: contact.userId
+            }));
+        }
+        catch (error) {
+            console.error('Error searching contacts:', error);
+            return [];
+        }
+    };
+    // Render function for typeahead results
+    const renderContactItem = (contact, isSelected) => (react_1.default.createElement("div", { className: "d-flex align-items-center" },
+        react_1.default.createElement("i", { className: "bi-person-circle me-2", style: { fontSize: '20px' } }),
+        react_1.default.createElement("div", { className: "flex-grow-1" },
+            react_1.default.createElement("div", { className: "fw-semibold" }, contact.name),
+            react_1.default.createElement("small", { className: "text-muted" }, contact.userId)),
+        react_1.default.createElement("div", null,
+            react_1.default.createElement("small", { className: "text-info" },
+                react_1.default.createElement("i", { className: `bi-${getSourceIcon(contact.source)} me-1` }),
+                getSourceLabel(contact.source)))));
+    // Helper functions for contact sources
+    const getSourceLabel = (source) => {
+        switch (source) {
+            case 'userDataContext': return 'Personal';
+            case 'currentDataContext': return 'Current';
+            case 'otherDataContexts': return 'Groups';
+            default: return source;
+        }
+    };
+    const getSourceIcon = (source) => {
+        switch (source) {
+            case 'userDataContext': return 'person-fill';
+            case 'currentDataContext': return 'house-fill';
+            case 'otherDataContexts': return 'people-fill';
+            default: return 'question-circle';
+        }
+    };
+    const addMember = async () => {
+        if (selectedContacts.length === 0)
+            return;
+        setAddingMember(true);
+        try {
+            // Add all selected contacts with the chosen role
+            for (const contact of selectedContacts) {
+                let member = await groupMembersTable.findOne({ userId: contact.userId, groupId });
+                if (member) {
+                    member.role = newMemberRole;
+                    member.deleted = false;
+                }
+                else {
+                    member = await groupMembersTable.initRecord({
+                        groupId: groupId,
+                        userId: contact.userId,
+                        role: newMemberRole
+                    });
+                }
+                await groupMembersTable.save(member);
+            }
+            // Reset form
+            setSelectedContacts([]);
+            setNewMemberRole(peers_sdk_1.GroupMemberRole.Reader);
+            // Refresh the members list
+            setRefreshKey(prev => prev + 1);
+        }
+        catch (err) {
+            console.error('Failed to add member:', err);
+            alert('Failed to add member. They may already be in the group.');
+        }
+        finally {
+            setAddingMember(false);
+        }
+    };
+    // Render function for contact badges
+    const renderContactBadge = (contact) => (react_1.default.createElement("span", null, contact.name));
+    const updateRole = async (memberId, newRole) => {
+        try {
+            const member = await groupMembersTable.get(memberId);
+            if (member) {
+                member.role = newRole;
+                await groupMembersTable.save(member);
+                setRefreshKey(prev => prev + 1);
+            }
+        }
+        catch (err) {
+            console.error('Failed to update role:', err);
+            alert('Failed to update member role.');
+        }
+    };
+    const removeMember = async (memberId) => {
+        if (!confirm('Remove this member from the group?'))
+            return;
+        try {
+            await groupMembersTable.delete(memberId);
+            setRefreshKey(prev => prev + 1);
+        }
+        catch (err) {
+            console.error('Failed to remove member:', err);
+            alert('Failed to remove member.');
+        }
+    };
+    if (!membersData || !userPermissions || !founderData) {
+        return react_1.default.createElement(loading_indicator_1.LoadingIndicator, null);
+    }
+    const { canEdit, userRole, currentUserId } = userPermissions;
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement("div", { className: "d-flex justify-content-between align-items-center mb-3" },
+            react_1.default.createElement("h6", { className: "mb-0" }, "Group Members"),
+            react_1.default.createElement("div", { className: "d-flex align-items-center gap-2" },
+                react_1.default.createElement("div", { className: `alert alert-${userRole ? 'primary' : 'warning'} py-2 px-3 mb-0 d-flex align-items-center` },
+                    react_1.default.createElement("i", { className: `bi ${userRole ? 'bi-person-badge' : 'bi-exclamation-triangle'} me-2` }),
+                    react_1.default.createElement("strong", null,
+                        "Your role: ",
+                        (0, peers_sdk_1.getRoleLabel)(userRole))),
+                founderData && founderData.founderUserId !== currentUserId && (react_1.default.createElement("a", { href: `#contacts/${founderData.founderUserId}`, className: "alert alert-warning py-2 px-3 mb-0 d-flex align-items-center text-decoration-none", style: { cursor: 'pointer' } },
+                    react_1.default.createElement("i", { className: "bi bi-crown-fill me-2" }),
+                    react_1.default.createElement("strong", null,
+                        "Founder: ",
+                        founderData.founderUser?.name || founderData.founderUserId))))),
+        canEdit && (react_1.default.createElement("div", { className: "card mb-3" },
+            react_1.default.createElement("div", { className: "card-body" },
+                react_1.default.createElement("h6", { className: "card-title" }, "Add Member"),
+                react_1.default.createElement("div", { className: "row g-2" },
+                    react_1.default.createElement("div", { className: "col-md-6" },
+                        react_1.default.createElement(typeahead_1.Typeahead, { placeholder: "Search contacts to add...", searchFn: searchContacts, onSelectionChange: (items) => setSelectedContacts(items), renderItem: renderContactItem, renderBadge: renderContactBadge, selectedItems: selectedContacts.map(contact => ({ ...contact, id: contact.userId })), multiSelect: true, disabled: addingMember })),
+                    react_1.default.createElement("div", { className: "col-md-3" },
+                        react_1.default.createElement("select", { className: "form-select", value: newMemberRole, onChange: (e) => setNewMemberRole(Number(e.target.value) || 0), disabled: addingMember },
+                            react_1.default.createElement("option", { value: peers_sdk_1.GroupMemberRole.None }, "None"),
+                            react_1.default.createElement("option", { value: peers_sdk_1.GroupMemberRole.Reader }, "Reader"),
+                            react_1.default.createElement("option", { value: peers_sdk_1.GroupMemberRole.Writer }, "Writer"),
+                            react_1.default.createElement("option", { value: peers_sdk_1.GroupMemberRole.Admin }, "Admin"),
+                            react_1.default.createElement("option", { value: peers_sdk_1.GroupMemberRole.Owner }, "Owner"))),
+                    react_1.default.createElement("div", { className: "col-md-3" },
+                        react_1.default.createElement("button", { className: "btn btn-primary w-100", onClick: addMember, disabled: addingMember || selectedContacts.length === 0 }, addingMember ? 'Adding...' :
+                            selectedContacts.length === 1 ? 'Add Member' :
+                                selectedContacts.length > 1 ? `Add ${selectedContacts.length} Members` : 'Add')))))),
+        !canEdit && userRole && (react_1.default.createElement("div", { className: "alert alert-info" },
+            react_1.default.createElement("i", { className: "bi bi-info-circle me-2" }),
+            "You can view group members, but only admins and owners can manage membership.")),
+        membersData.length === 0 ? (react_1.default.createElement("div", { className: "alert alert-info" }, "No members in this group yet. Add the first member above.")) : (react_1.default.createElement("div", { className: "list-group" }, membersData.map(({ member, user }) => (react_1.default.createElement("div", { key: member.groupMemberId, className: "list-group-item" },
+            react_1.default.createElement("div", { className: "d-flex justify-content-between align-items-center" },
+                react_1.default.createElement("div", { className: "flex-grow-1" },
+                    react_1.default.createElement("div", { className: "d-flex align-items-center" },
+                        react_1.default.createElement("i", { className: "bi bi-person-fill me-2" }),
+                        react_1.default.createElement("div", null,
+                            react_1.default.createElement("div", { className: "d-flex align-items-center" },
+                                react_1.default.createElement("strong", null,
+                                    user?.name || member.userId,
+                                    member.userId === currentUserId && ' (You)'),
+                                user?.source === 'userDataContext' && (react_1.default.createElement("span", { className: "badge bg-info ms-2", style: { fontSize: '0.7rem' } },
+                                    react_1.default.createElement("i", { className: "bi bi-person me-1" }),
+                                    "Personal")),
+                                user?.source === 'otherDataContexts' && (react_1.default.createElement("span", { className: "badge bg-secondary ms-2", style: { fontSize: '0.7rem' } },
+                                    react_1.default.createElement("i", { className: "bi bi-people me-1" }),
+                                    "Other Groups"))),
+                            user && user.userId !== user.name && (react_1.default.createElement("small", { className: "text-muted d-block" }, member.userId))))),
+                react_1.default.createElement("div", { className: "d-flex align-items-center" },
+                    react_1.default.createElement(TrustLevelBadge, { level: user?.trustLevel || peers_sdk_1.TrustLevel.Unknown }),
+                    react_1.default.createElement("a", { href: `#contacts/${member.userId}`, className: "btn btn-outline-primary btn-sm me-2" },
+                        react_1.default.createElement("i", { className: "bi-eye me-1" }),
+                        "View"),
+                    canEdit ? (react_1.default.createElement(react_1.default.Fragment, null,
+                        react_1.default.createElement("select", { className: "form-select form-select-sm me-2", style: { width: '120px' }, value: member.role, onChange: (e) => updateRole(member.groupMemberId, Number(e.target.value) || 0) },
+                            react_1.default.createElement("option", { value: peers_sdk_1.GroupMemberRole.None }, "None"),
+                            react_1.default.createElement("option", { value: peers_sdk_1.GroupMemberRole.Reader }, "Reader"),
+                            react_1.default.createElement("option", { value: peers_sdk_1.GroupMemberRole.Writer }, "Writer"),
+                            react_1.default.createElement("option", { value: peers_sdk_1.GroupMemberRole.Admin }, "Admin"),
+                            react_1.default.createElement("option", { value: peers_sdk_1.GroupMemberRole.Owner }, "Owner")),
+                        react_1.default.createElement("button", { className: "btn btn-outline-danger btn-sm", onClick: () => removeMember(member.groupMemberId), title: "Remove member" },
+                            react_1.default.createElement("i", { className: "bi bi-trash" })))) : (
+                    /* Read-only role display for non-admins */
+                    react_1.default.createElement("span", { className: "badge bg-secondary text-capitalize" }, (0, peers_sdk_1.getRoleLabel)(member.role)))))))))),
+        react_1.default.createElement("div", { className: "mt-4" },
+            react_1.default.createElement("small", { className: "text-muted" },
+                react_1.default.createElement("strong", null, "Roles:"),
+                react_1.default.createElement("br", null),
+                react_1.default.createElement("strong", null, "Reader:"),
+                " Can view group content",
+                react_1.default.createElement("br", null),
+                react_1.default.createElement("strong", null, "Writer:"),
+                " Can create and edit content",
+                react_1.default.createElement("br", null),
+                react_1.default.createElement("strong", null, "Admin:"),
+                " Can manage members and settings",
+                react_1.default.createElement("br", null),
+                react_1.default.createElement("strong", null, "Owner:"),
+                " Full control including group deletion"))));
+};
+exports.GroupMembersUI = GroupMembersUI;
+const TrustLevelBadge = ({ level }) => {
+    // Define trust level configurations with their numeric values
+    const trustLevelConfigs = [
+        { value: peers_sdk_1.TrustLevel.Self, color: 'success', icon: 'bi-shield-fill-check', text: 'Self' },
+        { value: peers_sdk_1.TrustLevel.Trusted, color: 'success', icon: 'bi-shield-check', text: 'Trusted' },
+        { value: peers_sdk_1.TrustLevel.Known, color: 'info', icon: 'bi-shield-check', text: 'Known' },
+        { value: peers_sdk_1.TrustLevel.NewDevice, color: 'primary', icon: 'bi-shield-plus', text: 'New Device' },
+        { value: peers_sdk_1.TrustLevel.NewUser, color: 'primary', icon: 'bi-shield-plus', text: 'New User' },
+        { value: peers_sdk_1.TrustLevel.Unknown, color: 'warning', icon: 'bi-shield-exclamation', text: 'Unknown' },
+        { value: peers_sdk_1.TrustLevel.Untrusted, color: 'danger', icon: 'bi-shield-x', text: 'Untrusted' },
+        { value: peers_sdk_1.TrustLevel.Malicious, color: 'danger', icon: 'bi-shield-x', text: 'Malicious' }
+    ];
+    // Sort by trust level value (ascending, so lowest first)
+    const sortedConfigs = trustLevelConfigs.sort((a, b) => a.value - b.value);
+    // Find the highest trust level that is at or below the current level
+    let config = { color: 'secondary', icon: 'bi-shield', text: 'Unknown' };
+    for (const trustConfig of sortedConfigs) {
+        if (level >= trustConfig.value) {
+            config = trustConfig;
+        }
+        else {
+            break;
+        }
+    }
+    return (react_1.default.createElement("span", { className: `badge bg-${config.color} d-flex align-items-center gap-1 me-2`, style: { fontSize: '0.7rem' } },
+        react_1.default.createElement("i", { className: config.icon }),
+        config.text));
+};

package/dist/screens/groups/index.d.ts

@@ -0,0 +1,6 @@
+import './group-list';
+import './group-details';
+import './group-members';
+export * from "./group-list";
+export * from "./group-details";
+export * from "./group-members";

package/dist/screens/groups/index.js

@@ -0,0 +1,23 @@
+"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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+// Import all group screen components to ensure they register their routes
+require("./group-list");
+require("./group-details");
+require("./group-members");
+__exportStar(require("./group-list"), exports);
+__exportStar(require("./group-details"), exports);
+__exportStar(require("./group-members"), exports);

package/dist/screens/knowledge/knowledge-frame-details.bk.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+interface IProps {
+    knowledgeFrameId: string;
+}
+export declare const KnowledgeFrameDetails: (props: IProps) => React.JSX.Element;
+export {};

package/dist/screens/knowledge/knowledge-frame-details.bk.js

@@ -0,0 +1,84 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.KnowledgeFrameDetails = void 0;
+const peers_sdk_1 = require("@peers-app/peers-sdk");
+const react_1 = __importDefault(require("react"));
+const peers_sdk_2 = require("@peers-app/peers-sdk");
+const save_button_1 = require("../../components/save-button");
+const text_list_editor_1 = require("../../components/text-list-editor.tsx/text-list-editor");
+const loading_indicator_1 = require("../../components/loading-indicator");
+const hooks_1 = require("../../hooks");
+const input_1 = require("../../components/input");
+const KnowledgeFrameDetails = (props) => {
+    const frame = (0, hooks_1.usePromise)(async () => {
+        const frame = await (0, peers_sdk_2.KnowledgeFrames)().get(props.knowledgeFrameId);
+        if (!frame) {
+            throw new Error('Knowledge Frame not found');
+        }
+        return (0, peers_sdk_2.KnowledgeFrames)().initDoc(frame);
+    }, undefined, [props.knowledgeFrameId]);
+    const bodyObs = frame?.qs.body || (0, peers_sdk_1.observable)('');
+    // useEffect
+    let p = setTimeout(() => { }, 0);
+    (0, hooks_1.useSubscription)(bodyObs, () => {
+        clearTimeout(p);
+        p = setTimeout(() => {
+            // todo update frames knowledgeIds that are linked in the body
+            frame?.save();
+        }, 2000);
+    });
+    if (!frame) {
+        return react_1.default.createElement(loading_indicator_1.LoadingIndicator, null);
+    }
+    return (react_1.default.createElement("div", { className: "container-fluid p-3" },
+        react_1.default.createElement("div", { className: "d-flex" },
+            react_1.default.createElement("div", null,
+                react_1.default.createElement("h4", null,
+                    react_1.default.createElement("i", { className: "me-2 bi bi-window-dock" }))),
+            react_1.default.createElement("div", { className: "flex-grow-1" },
+                react_1.default.createElement("h4", null,
+                    react_1.default.createElement(input_1.Input, { key: frame.knowledgeFrameId, className: 'border border-0', style: { width: '100%', outline: 'none', backgroundColor: 'transparent' }, value: frame.qs.name }))),
+            react_1.default.createElement("div", null,
+                react_1.default.createElement(save_button_1.SaveButton, { key: frame.knowledgeFrameId, doc: frame }))),
+        react_1.default.createElement("br", null),
+        react_1.default.createElement(text_list_editor_1.TextListEditor, { value: bodyObs, maxHeight: 'calc(100vh - 130px)' })));
+};
+exports.KnowledgeFrameDetails = KnowledgeFrameDetails;
+const KnowledgeEntriesList = (props) => {
+    const { frame } = props;
+    (0, hooks_1.useObservable)(frame.qs.knowledgeValueIds);
+    const knowledgeEntries = (0, hooks_1.usePromise)(async () => {
+        return (0, peers_sdk_2.KnowledgeValues)().list({ knowledgeValueId: frame.knowledgeValueIds });
+    }, [], [frame.knowledgeValueIds]);
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement(NewKnowledgeEntry, { frame: frame }),
+        react_1.default.createElement("div", null, knowledgeEntries?.map(entry => {
+            return (react_1.default.createElement("div", { key: entry.knowledgeValueId }, JSON.stringify(entry, null, 2)));
+        }))));
+};
+const NewKnowledgeEntry = (props) => {
+    const { defaultSubjectId, defaultPredicateId, frame } = props;
+    const valueStr = (0, hooks_1.useObservableState)('', true);
+    const addKnowledgeEntry = async (e) => {
+        e.preventDefault();
+        const value = valueStr().trim();
+        throw new Error('Not implemented');
+        // const entry = await KnowledgeValues().insert({
+        //   knowledgeValueId: newid(),
+        //   peerTypeId: 'string',
+        //   value,
+        //   // predicateId: defaultPredicateId,
+        //   // subjectId: defaultSubjectId,
+        //   // modified: Date.now(),
+        // });
+        // frame.knowledgeValueIds = [...frame.knowledgeValueIds, entry.knowledgeValueId];
+        // await frame.save();
+        // valueStr('');
+    };
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement("form", { onSubmit: addKnowledgeEntry },
+            react_1.default.createElement(input_1.Input, { value: valueStr, className: "form-control sm", type: "text", placeholder: "Add Entry" }))));
+};

package/dist/screens/knowledge/knowledge-frame-details.d.ts

@@ -0,0 +1,8 @@
+import { IKnowledgeValue } from "@peers-app/peers-sdk";
+import React from "react";
+interface IProps {
+    knowledgeFrameId: string;
+}
+export declare const KnowledgeFrameDetails: (props: IProps) => React.JSX.Element;
+export declare function searchKnowledgeValues(searchText: string): Promise<IKnowledgeValue[]>;
+export {};

package/dist/screens/knowledge/knowledge-frame-details.js

@@ -0,0 +1,143 @@
+"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;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.KnowledgeFrameDetails = void 0;
+exports.searchKnowledgeValues = searchKnowledgeValues;
+const peers_sdk_1 = require("@peers-app/peers-sdk");
+const lodash_1 = require("lodash");
+const react_1 = __importStar(require("react"));
+const input_1 = require("../../components/input");
+const loading_indicator_1 = require("../../components/loading-indicator");
+const save_button_1 = require("../../components/save-button");
+const typeahead_1 = require("../../components/typeahead/typeahead");
+const hooks_1 = require("../../hooks");
+const mention_configs_1 = require("../../mention-configs");
+const tabs_state_1 = require("../../tabs-layout/tabs-state");
+const KnowledgeFrameDetails = (props) => {
+    const frame = (0, hooks_1.usePromise)(async () => {
+        const frame = await (0, peers_sdk_1.KnowledgeFrames)().get(props.knowledgeFrameId);
+        if (!frame) {
+            throw new Error('Knowledge Frame not found');
+        }
+        const doc = (0, peers_sdk_1.KnowledgeFrames)().initDoc(frame);
+        (0, tabs_state_1.updateActiveTabTitle)(doc.name || "Knowledge Frame");
+        return doc;
+    }, undefined, [props.knowledgeFrameId]);
+    const typeaheadText = (0, hooks_1.useObservableState)('', true);
+    if (!frame) {
+        return react_1.default.createElement(loading_indicator_1.LoadingIndicator, null);
+    }
+    function createKnowledgeValue() {
+        console.log('submit', { textValue: typeaheadText() });
+    }
+    return (react_1.default.createElement("div", { className: "container-fluid p-3" },
+        react_1.default.createElement("div", { className: "d-flex" },
+            react_1.default.createElement("div", null,
+                react_1.default.createElement("h4", null,
+                    react_1.default.createElement("i", { className: "me-2 bi bi-window-dock" }))),
+            react_1.default.createElement("div", { className: "flex-grow-1" },
+                react_1.default.createElement("h4", null,
+                    react_1.default.createElement(input_1.Input, { key: frame.knowledgeFrameId, className: 'border border-0', style: { width: '100%', outline: 'none', backgroundColor: 'transparent' }, value: frame.qs.name }))),
+            react_1.default.createElement("div", null,
+                react_1.default.createElement(save_button_1.SaveButton, { key: frame.knowledgeFrameId, doc: frame }))),
+        react_1.default.createElement("br", null),
+        react_1.default.createElement(typeahead_1.Typeahead, { value: (0, peers_sdk_1.observable)(''), textValue: typeaheadText, mentionConfigs: mention_configs_1.mentionConfigs, 
+            // placeholder={`Search for knowledge to add or create new`}
+            autoFocus: true, onSubmit: createKnowledgeValue }),
+        react_1.default.createElement(KnowledgeSearchValuesList, { searchText: typeaheadText }),
+        react_1.default.createElement(KnowledgeFrameValuesList, { frame: frame })));
+};
+exports.KnowledgeFrameDetails = KnowledgeFrameDetails;
+let p = undefined;
+const KnowledgeSearchValuesList = (props) => {
+    const { searchText } = props;
+    (0, hooks_1.useObservable)(searchText);
+    const [searchResults, setSearchResults] = (0, react_1.useState)(undefined);
+    (0, hooks_1.useSubscription)(searchText, async (text) => {
+        clearTimeout(p);
+        setSearchResults(undefined);
+        if (!searchText()) {
+            return;
+        }
+        p = setTimeout(async () => {
+            p = undefined;
+            const values = await searchKnowledgeValues(searchText());
+            if (p)
+                return;
+            setSearchResults(values);
+        }, 1000);
+    }, true);
+    if (!searchText()) {
+        return null;
+    }
+    if (searchResults === undefined) {
+        return (react_1.default.createElement("div", { className: "d-flex justify-content-center m-3" },
+            react_1.default.createElement("div", { className: "spinner-grow", role: "status", style: { width: '1.2rem', height: '1.2rem', } },
+                react_1.default.createElement("span", { className: "visually-hidden" }, "Loading..."))));
+    }
+    if (searchResults.length === 0) {
+        return (react_1.default.createElement("div", { className: "d-flex justify-content-center mt-3", style: { minHeight: '35px' } },
+            react_1.default.createElement("div", null, "No results found")));
+    }
+    return (react_1.default.createElement("div", { style: { minHeight: '51px' } }, searchResults.map(item => react_1.default.createElement(peers_sdk_1.PeersUI, { key: item.knowledgeValueId, uiEditMode: "view", uiCategory: "list-item", props: { knowledgeValue: item } }))));
+};
+const KnowledgeFrameValuesList = (props) => {
+    const { frame } = props;
+    return (react_1.default.createElement("div", null, "show values included in frame"));
+};
+async function searchKnowledgeValues(searchText) {
+    const mentions = (0, peers_sdk_1.getAllMentions)(searchText);
+    const typeMentions = mentions.filter(m => m.kind === "type");
+    const otherMentions = mentions.filter(m => m.kind !== "type");
+    const filter = {};
+    if (typeMentions.length) {
+        filter.peerTypeId = typeMentions.map(m => m.id);
+        for (const typeMention of typeMentions) {
+            searchText = searchText.replace((0, peers_sdk_1.formatMention)(typeMention), '');
+        }
+    }
+    if (otherMentions.length) {
+        for (const mention of mentions) {
+            searchText = searchText.replace((0, peers_sdk_1.formatMention)(mention), mention.id);
+        }
+    }
+    searchText = searchText.trim();
+    let matches = await (0, peers_sdk_1.KnowledgeValues)().list(filter, { pageSize: 100, textSearch: searchText });
+    if (searchText) {
+        const words = searchText.toLowerCase().split(' ');
+        matches = (0, lodash_1.sortBy)(matches, r => words.filter(w => r.name.toLowerCase().includes(w)).length).reverse();
+    }
+    return matches;
+}

package/dist/screens/knowledge/knowledge-frame-list.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const KnowledgeFrameList: () => React.JSX.Element;

package/dist/screens/knowledge/knowledge-frame-list.js

@@ -0,0 +1,45 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.KnowledgeFrameList = void 0;
+const react_1 = __importDefault(require("react"));
+const peers_sdk_1 = require("@peers-app/peers-sdk");
+const list_screen_1 = require("../../components/list-screen");
+const globals_1 = require("../../globals");
+const KnowledgeFrameList = () => {
+    const screenPathPart = 'knowledge-frames';
+    const icon = 'bi bi-window-dock';
+    return (0, list_screen_1.ListScreen)({
+        table: (0, peers_sdk_1.KnowledgeFrames)(),
+        sortBy: ['-modified'],
+        placeholderName: 'frame',
+        getFilter: (text) => {
+            return {
+                $or: [
+                    { name: { $matchWords: text } },
+                    { body: { $matchWords: text } },
+                ]
+            };
+        },
+        newRecord: async (text) => {
+            const knowledgeFrame = await (0, peers_sdk_1.KnowledgeFrames)().insert({
+                knowledgeFrameId: (0, peers_sdk_1.newid)(),
+                name: text,
+                knowledgeValueIds: [],
+                body: '',
+                modified: Date.now(),
+            });
+            (0, globals_1.mainContentPath)(`${screenPathPart}/${knowledgeFrame.knowledgeFrameId}`);
+            return knowledgeFrame;
+        },
+        renderItem: (item) => {
+            return (react_1.default.createElement("div", { key: item.knowledgeFrameId, className: 'container-fluid pb-4' },
+                react_1.default.createElement("i", { style: { cursor: 'pointer' }, className: icon }),
+                "\u00A0\u00A0",
+                react_1.default.createElement("a", { href: `#${screenPathPart}/${item.knowledgeFrameId}` }, item.name?.trim() || 'No Name')));
+        },
+    });
+};
+exports.KnowledgeFrameList = KnowledgeFrameList;

package/dist/screens/knowledge/knowledge-value-details.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+interface IProps {
+    knowledgeValueId: string;
+}
+export declare const KnowledgeValueDetails: (props: IProps) => React.JSX.Element;
+export {};