@ibgib/space-gib 0.0.32 → 0.0.34

package/src/client/ui/component/nested-chat/nested-chat-types.mts

@@ -0,0 +1,53 @@
+import { ChildInfoBase } from "@ibgib/web-gib/dist/ui/component/component-types.mjs";
+import { IbGibAddr } from "@ibgib/ts-gib/dist/types.mjs";
+import { SettingsBase, SettingsWithTabs } from "@ibgib/web-gib/dist/common/settings/settings-types.mjs";
+import { SETTINGS_TYPE_NESTED_CHAT } from "./nested-chat-constants.mjs";
+import type { ChatComponentInstance } from "./chat/chat.mjs";
+
+export interface Settings_NestedChat extends SettingsBase, SettingsWithTabs {
+    type: typeof SETTINGS_TYPE_NESTED_CHAT;
+}
+
+export const DEFAULT_SETTINGS_NESTED_CHAT: Settings_NestedChat = {
+    type: SETTINGS_TYPE_NESTED_CHAT,
+    openChildTjpAddrs: [],
+    activeChildTjpAddr: undefined,
+};
+
+/**
+ * Information tracked per breadcrumb tab by the parent space-gib-nested-chat.
+ */
+export interface NestedChatTabInfo extends ChildInfoBase<ChatComponentInstance> {
+    shortTitle: string;
+    fullText: string;
+    depth: number;
+    addr: IbGibAddr;
+    tjpAddr?: IbGibAddr;
+}
+
+/**
+ * Visual model for a comment/message displayed in space-gib-chat.
+ */
+export interface ChatCommentItem {
+    id: string;
+    addr: IbGibAddr;
+    title?: string;
+    author: string;
+    avatar?: string;
+    role?: 'Keystone' | 'Peer' | 'Agent';
+    timestamp: string;
+    text: string;
+    anchor?: string;
+    replyCount?: number;
+    isEncrypted?: boolean;
+    cipherAlgo?: string;
+}
+
+/**
+ * Detail payload when drilling down into a comment as a child chatroom context.
+ */
+export interface ChatDrillDownEventDetail {
+    addr: IbGibAddr;
+    text: string;
+    author?: string;
+}

package/src/client/ui/component/nested-chat/nested-chat.css

@@ -0,0 +1,142 @@
+:host {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+    background: var(--clr-bg-surface, #0d1322);
+    color: var(--clr-text-primary, #f0f4fc);
+    font-family: var(--font-sans, system-ui, -apple-system, sans-serif);
+    font-size: 0.85rem;
+    overflow: hidden;
+}
+
+.nested-chat-root {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+}
+
+/* ── Top Header & Breadcrumb Bar ── */
+.nested-chat-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.5rem;
+    padding: 0.4rem 0.75rem;
+    background: rgba(5, 8, 15, 0.7);
+    border-bottom: 1px solid var(--clr-border, rgba(255, 255, 255, 0.08));
+    flex-shrink: 0;
+    min-height: 38px;
+    box-sizing: border-box;
+}
+
+.nested-chat-breadcrumbs-container {
+    flex: 1;
+    overflow-x: auto;
+    overflow-y: hidden;
+    white-space: nowrap;
+    scrollbar-width: thin;
+    scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
+}
+
+.nested-chat-breadcrumbs-container::-webkit-scrollbar {
+    height: 3px;
+}
+
+.nested-chat-breadcrumbs-container::-webkit-scrollbar-thumb {
+    background: rgba(255, 255, 255, 0.15);
+    border-radius: 3px;
+}
+
+.nested-chat-breadcrumbs-rail {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.2rem;
+}
+
+/* ── Individual Breadcrumb Item / Tab ── */
+.breadcrumb-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.35rem;
+    background: transparent;
+    border: 1px solid transparent;
+    color: var(--clr-text-muted, #7e8c9f);
+    padding: 0.2rem 0.5rem;
+    border-radius: 4px;
+    font-size: 0.75rem;
+    font-family: inherit;
+    cursor: pointer;
+    transition: all 120ms ease;
+    max-width: 160px;
+    white-space: nowrap;
+}
+
+.breadcrumb-btn:hover {
+    background: rgba(255, 255, 255, 0.06);
+    color: var(--clr-text-primary, #f0f4fc);
+    border-color: rgba(255, 255, 255, 0.1);
+}
+
+.breadcrumb-btn.active {
+    background: rgba(120, 248, 126, 0.12);
+    border-color: rgba(120, 248, 126, 0.3);
+    color: var(--clr-accent, #78f87e);
+    font-weight: 600;
+}
+
+.bc-icon {
+    font-size: 0.8rem;
+    line-height: 1;
+    flex-shrink: 0;
+}
+
+.bc-title {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.breadcrumb-separator {
+    color: rgba(255, 255, 255, 0.25);
+    font-size: 0.75rem;
+    user-select: none;
+    margin: 0 0.15rem;
+    flex-shrink: 0;
+}
+
+/* ── Close Action ── */
+.nested-chat-header-actions {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+}
+
+.btn-nested-chat-close {
+    background: transparent;
+    border: none;
+    color: var(--clr-text-muted, #7e8c9f);
+    font-size: 0.85rem;
+    cursor: pointer;
+    padding: 0.2rem 0.4rem;
+    border-radius: 4px;
+    transition: all 120ms ease;
+}
+
+.btn-nested-chat-close:hover {
+    background: rgba(255, 255, 255, 0.08);
+    color: var(--clr-text-primary, #f0f4fc);
+}
+
+/* ── Active Child Viewport Content ── */
+.nested-chat-content {
+    flex: 1;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+}

package/src/client/ui/component/nested-chat/nested-chat.html

@@ -0,0 +1,11 @@
+<div id="nested-chat-root" class="nested-chat-root">
+    <div id="nested-chat-header" class="nested-chat-header">
+        <div id="nested-chat-breadcrumbs-container" class="nested-chat-breadcrumbs-container">
+            <div id="nested-chat-breadcrumbs-rail" class="nested-chat-breadcrumbs-rail"></div>
+        </div>
+        <div class="nested-chat-header-actions">
+            <button id="btn-nested-chat-close" class="btn-nested-chat-close" title="Close Chat Panel">✕</button>
+        </div>
+    </div>
+    <div id="nested-chat-content" class="nested-chat-content"></div>
+</div>

package/src/client/ui/component/nested-chat/nested-chat.mts

@@ -0,0 +1,393 @@
+import thisCss from "./nested-chat.css";
+import thisHtml from "./nested-chat.html";
+
+import { ROOT_ADDR } from "@ibgib/ts-gib/dist/V1/constants.mjs";
+import { IbGibAddr } from "@ibgib/ts-gib/dist/types.mjs";
+import { IbGib_V1 } from "@ibgib/ts-gib/dist/V1/types.mjs";
+import { Factory_V1 } from "@ibgib/ts-gib/dist/V1/factory.mjs";
+import { getIbAndGib, getIbGibAddr } from "@ibgib/ts-gib/dist/helper.mjs";
+import { getGibInfo } from "@ibgib/ts-gib/dist/V1/transforms/transform-helper.mjs";
+import { extractErrorMsg } from "@ibgib/helper-gib/dist/helpers/utils-helper.mjs";
+import {
+    IbGibDynamicComponentMetaBase, IbGibDynamicComponentInstanceBase_ParentOfTabs,
+} from "@ibgib/web-gib/dist/ui/component/ibgib-dynamic-component-bases.mjs";
+import {
+    ElementsBase, IbGibDynamicComponentInstance,
+} from "@ibgib/web-gib/dist/ui/component/component-types.mjs";
+import { getComponentCtorArg } from "@ibgib/web-gib/dist/app-bootstrap/init-orchestration.mjs";
+import { getComponentSvc } from "@ibgib/web-gib/dist/ui/component/ibgib-component-service.mjs";
+import { SettingsType } from "@ibgib/web-gib/dist/common/settings/settings-constants.mjs";
+
+import {
+    NESTED_CHAT_COMPONENT_NAME, CHAT_COMPONENT_NAME,
+    EVENT_SPACE_GIB_CHAT_DRILL_DOWN, EVENT_SPACE_GIB_CHAT_CLOSED,
+    SETTINGS_TYPE_NESTED_CHAT, MAX_BREADCRUMB_TEXT_LENGTH,
+} from "./nested-chat-constants.mjs";
+import {
+    Settings_NestedChat, NestedChatTabInfo, ChatDrillDownEventDetail,
+} from "./nested-chat-types.mjs";
+import { ChatComponentInstance, ChatComponentMeta } from "./chat/chat.mjs";
+
+/**
+ * Metadata factory for space-gib-nested-chat Web Component.
+ */
+export class NestedChatComponentMeta extends IbGibDynamicComponentMetaBase {
+    protected lc: string = `[${NestedChatComponentMeta.name}]`;
+
+    routeRegExp?: RegExp = new RegExp(`^${NESTED_CHAT_COMPONENT_NAME}$`);
+    componentName = NESTED_CHAT_COMPONENT_NAME;
+
+    constructor() {
+        super(getComponentCtorArg());
+        if (!customElements.get(this.componentName)) {
+            customElements.define(this.componentName, NestedChatComponentInstance);
+        }
+    }
+
+    async createInstance({
+        path,
+        ibGibAddr
+    }: {
+        path: string;
+        ibGibAddr: IbGibAddr;
+    }): Promise<IbGibDynamicComponentInstance> {
+        const component = document.createElement(this.componentName) as NestedChatComponentInstance;
+        await component.initialize({
+            ibGibAddr: ibGibAddr || ROOT_ADDR,
+            meta: this,
+            html: thisHtml,
+            css: [thisCss],
+        });
+        return component;
+    }
+}
+
+/**
+ * References to DOM elements within the component's Shadow Root.
+ */
+export interface NestedChatElements extends ElementsBase {
+    rootEl: HTMLDivElement;
+    headerEl: HTMLDivElement;
+    breadcrumbsContainerEl: HTMLDivElement;
+    breadcrumbsRailEl: HTMLDivElement;
+    contentEl: HTMLDivElement;
+    btnCloseEl: HTMLButtonElement;
+}
+
+/**
+ * Concrete implementation of the nested, recursive tabbed chat parent component.
+ * Hosts child space-gib-chat instances in a breadcrumb trail.
+ */
+export class NestedChatComponentInstance
+    extends IbGibDynamicComponentInstanceBase_ParentOfTabs<Settings_NestedChat, IbGib_V1, NestedChatElements, NestedChatTabInfo>
+    implements IbGibDynamicComponentInstance<IbGib_V1, NestedChatElements> {
+
+    protected override lc: string = `[${NestedChatComponentInstance.name}]`;
+
+    protected get settingsType(): SettingsType {
+        return SETTINGS_TYPE_NESTED_CHAT;
+    }
+
+    get el(): NestedChatElements {
+        if (!this.elements) {
+            throw new Error(`elements is not defined in ${this.lc}`);
+        }
+        return this.elements;
+    }
+
+    private tabLabels: Map<string, { shortTitle: string, fullText: string, icon: string }> = new Map();
+
+    private ensureValidIbGibAddr(addr: string): IbGibAddr {
+        if (!addr || addr === ROOT_ADDR) {
+            return 'file src/index.ts^index_tjp';
+        }
+        if (!addr.includes('^')) {
+            return `file ${addr}^${addr.replace(/[^a-zA-Z0-9]/g, '_')}_tjp`;
+        }
+        return addr;
+    }
+
+    override async created(): Promise<void> {
+        const lc = `${this.lc}[${this.created.name}]`;
+        try {
+            console.log(`${lc} created starting...`);
+            const root = this.shadowRoot!;
+            this.elements = {
+                rootEl: root.getElementById('nested-chat-root') as HTMLDivElement,
+                headerEl: root.getElementById('nested-chat-header') as HTMLDivElement,
+                breadcrumbsContainerEl: root.getElementById('nested-chat-breadcrumbs-container') as HTMLDivElement,
+                breadcrumbsRailEl: root.getElementById('nested-chat-breadcrumbs-rail') as HTMLDivElement,
+                contentEl: root.getElementById('nested-chat-content') as HTMLDivElement,
+                btnCloseEl: root.getElementById('btn-nested-chat-close') as HTMLButtonElement,
+            };
+
+            this.bindEvents();
+
+            // Only activate initial thread if an ibGibAddr was explicitly provided to the component
+            if (this.ibGibAddr) {
+                const rootAddr = this.ensureValidIbGibAddr(this.ibGibAddr);
+                setTimeout(async () => {
+                    console.log(`${lc} activating initial root thread: ${rootAddr}`);
+                    await this.activateIbGib({ addr: rootAddr });
+                }, 0);
+            }
+
+        } catch (error) {
+            console.error(`${lc} ${extractErrorMsg(error)}`);
+        }
+    }
+
+    override async disconnected(): Promise<void> {
+        // Lifecycle cleanup
+    }
+
+    private bindEvents(): void {
+        this.el.btnCloseEl?.addEventListener('click', () => this.onCloseRequested());
+
+        // Listen for drill-down events bubbling from child space-gib-chat instances
+        this.addEventListener(EVENT_SPACE_GIB_CHAT_DRILL_DOWN, async (e: Event) => {
+            const customEv = e as CustomEvent<ChatDrillDownEventDetail>;
+            const detail = customEv.detail;
+            if (detail?.addr) {
+                await this.handleDrillDown(detail);
+            }
+        });
+    }
+
+    private onCloseRequested(): void {
+        this.dispatchEvent(new CustomEvent(EVENT_SPACE_GIB_CHAT_CLOSED, {
+            bubbles: true,
+            composed: true,
+        }));
+        window.dispatchEvent(new CustomEvent('space-gib-chat-close-requested', {
+            bubbles: true,
+            composed: true,
+        }));
+    }
+
+    /**
+     * Handles drill-down request into a child comment.
+     * Preserves ancestor trail, but if drilling down from an earlier ancestor,
+     * prunes any diverging descendants beyond the active ancestor.
+     */
+    private async handleDrillDown(detail: ChatDrillDownEventDetail): Promise<void> {
+        const lc = `${this.lc}[${this.handleDrillDown.name}]`;
+        try {
+            console.log(`${lc} handleDrillDown requested for:`, detail);
+            const activeIndex = this.childInfos.findIndex(x => x.active);
+            if (activeIndex >= 0 && activeIndex < this.childInfos.length - 1) {
+                // Prune diverging descendants after the active ancestor
+                this.childInfos = this.childInfos.slice(0, activeIndex + 1);
+            }
+
+            const addr = this.ensureValidIbGibAddr(detail.addr);
+            // Cache label info for this child comment
+            this.tabLabels.set(addr, {
+                shortTitle: this.formatShortTitle(detail.text),
+                fullText: detail.text,
+                icon: '💬',
+            });
+
+            await this.activateIbGib({ addr });
+
+        } catch (error) {
+            console.error(`${lc} ${extractErrorMsg(error)}`);
+        }
+    }
+
+    public override async activateIbGib({ addr, ibGib }: { addr?: IbGibAddr; ibGib?: IbGib_V1; }): Promise<void> {
+        const lc = `${this.lc}[${this.activateIbGib.name}]`;
+        try {
+            if (addr) {
+                addr = this.ensureValidIbGibAddr(addr);
+            } else if (ibGib) {
+                addr = getIbGibAddr({ ibGib });
+            }
+            console.log(`${lc} activating addr: ${addr}`);
+            await super.activateIbGib({ addr, ibGib });
+            this.renderBreadcrumbsRail();
+            console.log(`${lc} activation complete for addr: ${addr}. Child tabs: ${this.childInfos.length}`);
+        } catch (error) {
+            console.error(`${lc} ${extractErrorMsg(error)}`);
+        }
+    }
+
+    protected override async getLoadedChildInfo({
+        addr,
+        ibGib,
+    }: {
+        addr: IbGibAddr,
+        ibGib?: IbGib_V1,
+    }): Promise<NestedChatTabInfo> {
+        const lc = `${this.lc}[${this.getLoadedChildInfo.name}]`;
+        try {
+            if (!addr) { throw new Error(`(UNEXPECTED) addr falsy?`); }
+            addr = this.ensureValidIbGibAddr(addr);
+
+            const gib = getIbAndGib({ ibGibAddr: addr }).gib;
+            const gibInfo = getGibInfo({ gib });
+            const tjpGib = gibInfo.tjpGib ?? gib;
+
+            const existing = this.childInfos.find(x => {
+                const tabGib = getIbAndGib({ ibGibAddr: x.addr }).gib;
+                const tabGibInfo = getGibInfo({ gib: tabGib });
+                const tabTjpGib = tabGibInfo.tjpGib ?? tabGib;
+                return tabTjpGib === tjpGib || x.addr === addr;
+            });
+
+            if (existing) {
+                if (!existing.component) {
+                    existing.component = await this.createChildChatComponent(addr);
+                }
+                return existing;
+            }
+
+            const childComponent = await this.createChildChatComponent(addr);
+            const childIbGib = childComponent.ibGib || Factory_V1.primitive({ ib: `chat ${addr}` });
+            const tabBtnEl = await this.addChild({ addr, ibGib: childIbGib });
+
+            const label = this.getTabLabelForAddr(addr);
+            const tabInfo: NestedChatTabInfo = {
+                addr,
+                childBtnEl: tabBtnEl,
+                component: childComponent,
+                active: false,
+                shortTitle: label.shortTitle,
+                fullText: label.fullText,
+                depth: this.childInfos.length,
+            };
+
+            return tabInfo;
+        } catch (error) {
+            console.error(`${lc} ${extractErrorMsg(error)}`);
+            throw error;
+        }
+    }
+
+    private async createChildChatComponent(addr: IbGibAddr): Promise<ChatComponentInstance> {
+        const lc = `${this.lc}[${this.createChildChatComponent.name}]`;
+        console.log(`${lc} creating child chat component for addr: ${addr}`);
+        const componentSvc = await getComponentSvc();
+        let component = await componentSvc.getComponentInstance({
+            path: CHAT_COMPONENT_NAME,
+            ibGibAddr: addr,
+            useRegExpPrefilter: true,
+        }) as ChatComponentInstance;
+        if (!component) {
+            console.warn(`${lc} componentSvc returned null, falling back to direct meta instantiation`);
+            const meta = new ChatComponentMeta();
+            component = await meta.createInstance({
+                path: CHAT_COMPONENT_NAME,
+                ibGibAddr: addr,
+            }) as ChatComponentInstance;
+        }
+        return component;
+    }
+
+    protected override async addChild({
+        addr,
+        ibGib,
+    }: {
+        ibGib: IbGib_V1,
+        addr?: IbGibAddr,
+    }): Promise<HTMLElement> {
+        addr ??= getIbGibAddr({ ibGib });
+        const label = this.getTabLabelForAddr(addr);
+
+        const btn = document.createElement('button');
+        btn.className = 'breadcrumb-btn';
+        btn.setAttribute('data-addr', addr);
+        btn.title = label.fullText;
+        btn.innerHTML = `
+            <span class="bc-icon">${label.icon}</span>
+            <span class="bc-title">${this.escapeHtml(label.shortTitle)}</span>
+        `;
+        btn.addEventListener('click', (e) => {
+            e.stopPropagation();
+            this.activateIbGib({ addr });
+        });
+        return btn;
+    }
+
+    protected override async removeTabBtn({
+        tabInfo,
+    }: {
+        tabInfo: NestedChatTabInfo,
+    }): Promise<void> {
+        this.renderBreadcrumbsRail();
+    }
+
+    private renderBreadcrumbsRail(): void {
+        if (!this.el?.breadcrumbsRailEl) return;
+
+        const rail = this.el.breadcrumbsRailEl;
+        rail.innerHTML = '';
+
+        this.childInfos.forEach((info, idx) => {
+            // Update active styling
+            info.childBtnEl.className = `breadcrumb-btn ${info.active ? 'active' : ''}`;
+            rail.appendChild(info.childBtnEl);
+
+            // Add separator between breadcrumb tabs
+            if (idx < this.childInfos.length - 1) {
+                const sep = document.createElement('span');
+                sep.className = 'breadcrumb-separator';
+                sep.textContent = '›';
+                rail.appendChild(sep);
+            }
+        });
+
+        // Scroll active tab into view
+        const activeInfo = this.activeChildInfo;
+        if (activeInfo?.childBtnEl) {
+            activeInfo.childBtnEl.scrollIntoView({ behavior: 'smooth', inline: 'nearest' });
+        }
+    }
+
+    private getTabLabelForAddr(addr: IbGibAddr): { shortTitle: string, fullText: string, icon: string } {
+        const cached = this.tabLabels.get(addr);
+        if (cached) { return cached; }
+
+        const { ib } = getIbAndGib({ ibGibAddr: addr });
+        if (addr === ROOT_ADDR || ib === 'root' || ib.includes('file') || !addr.includes('comment')) {
+            const fileTitle = ib.startsWith('file ') ? ib.replace('file ', '') : 'src/index.ts';
+            return {
+                shortTitle: this.formatShortTitle(fileTitle),
+                fullText: `Root Thread: ${fileTitle}`,
+                icon: '🌿',
+            };
+        }
+
+        const pieces = ib.split(' ');
+        const text = pieces.length > 1 ? pieces.slice(1).join(' ') : 'Comment';
+        const shortTitle = this.formatShortTitle(text);
+        return {
+            shortTitle,
+            fullText: text,
+            icon: '💬',
+        };
+    }
+
+    private formatShortTitle(text: string): string {
+        const clean = text.replace(/[\n\r]+/g, ' ').trim();
+        if (clean.length <= MAX_BREADCRUMB_TEXT_LENGTH) {
+            return clean;
+        }
+        return clean.slice(0, MAX_BREADCRUMB_TEXT_LENGTH) + '…';
+    }
+
+    private escapeHtml(text: string): string {
+        const div = document.createElement('div');
+        div.textContent = text;
+        return div.innerHTML;
+    }
+
+    public getActiveChatInstance(): ChatComponentInstance | undefined {
+        return this.activeChildInfo?.component as ChatComponentInstance | undefined;
+    }
+
+    public enterNewTopicMode(initialTitle?: string): void {
+        const activeChat = this.getActiveChatInstance();
+        activeChat?.enterNewTopicMode(initialTitle);
+    }
+}

package/src/client/ui/component/notes-explorer/index.mts

@@ -0,0 +1,9 @@
+import { getComponentSvc } from "@ibgib/web-gib/dist/ui/component/ibgib-component-service.mjs";
+import { NotesExplorerComponentMeta } from "./notes-explorer.mjs";
+
+export * from "./notes-explorer.mjs";
+
+export async function registerNotesExplorerComponent(): Promise<void> {
+    const componentSvc = await getComponentSvc();
+    componentSvc.registerComponentMeta(new NotesExplorerComponentMeta());
+}