@peers-app/peers-ui 0.0.14

package/dist/utils.js

@@ -0,0 +1,250 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AsyncFunction = void 0;
+exports.htmlToText = htmlToText;
+exports.stripMentions = stripMentions;
+exports.trimAndSanitizeHtml = trimAndSanitizeHtml;
+exports.isObject = isObject;
+exports.js = js;
+exports.jsAsync = jsAsync;
+exports.toJSON = toJSON;
+exports.fromJSON = fromJSON;
+const dompurify_1 = __importDefault(require("dompurify"));
+const lodash_1 = __importDefault(require("lodash"));
+function htmlToText(html) {
+    let doc = new DOMParser().parseFromString(html, 'text/html');
+    return doc.body.textContent || "";
+}
+// Strip mention formatting and clean text for display
+function stripMentions(text) {
+    // Replace <type:name:id> with just the readable name part
+    // Convert underscores to spaces for better readability
+    return text.replace(/<[@$]([^:]+):([^:]+):([^>]+)>/g, (match, type, name, id) => {
+        return name.replace(/_/g, ' ');
+    });
+}
+function trimAndSanitizeHtml(value) {
+    let sanitizedValue = dompurify_1.default.sanitize(value);
+    // removes empty paragraphs
+    // return sanitizedValue.replace(/\<p\>\<br\>\<\/p\>/ig, '').trim()
+    const singleBlankLine = '<p><br></p>';
+    const doubleBlankLine = singleBlankLine + singleBlankLine;
+    // collapse lots of blank lines into one
+    while (sanitizedValue.includes(doubleBlankLine)) {
+        // @ts-ignore
+        sanitizedValue = sanitizedValue.replaceAll(doubleBlankLine, singleBlankLine);
+    }
+    // remove trailing blank line  
+    if (sanitizedValue.endsWith(singleBlankLine)) {
+        sanitizedValue = sanitizedValue.substr(0, sanitizedValue.length - singleBlankLine.length);
+    }
+    return sanitizedValue;
+}
+function isObject(x) {
+    return lodash_1.default.isObject(x) && !lodash_1.default.isArray(x) && !lodash_1.default.isDate(x) && x !== null;
+}
+function js(jsCode, externalReferences) {
+    const hideGlobals = [
+        'process', 'global' //,'setTimeout','setInterval','setImmediate','clearImmediate','clearInterval','clearTimeout'    
+    ];
+    const common = module.exports;
+    const refNames = ['console', 'common'];
+    const refValues = [console, common];
+    lodash_1.default.keys(externalReferences).forEach(key => {
+        refNames.push(key);
+        refValues.push(externalReferences[key]);
+    });
+    const compiledJs = Function.apply(null, [...refNames, ...hideGlobals, '"use strict";  ' + jsCode.trim()]);
+    return compiledJs.apply(null, refValues);
+}
+// must be done this way so TypeScript doesn't rewrite async keyword
+// export const AsyncFunction = eval('Object.getPrototypeOf(async function () { }).constructor');
+exports.AsyncFunction = Object.getPrototypeOf(async function () { }).constructor;
+function jsAsync(jsCode, externalReferences = {}) {
+    jsCode = String(jsCode).trim();
+    const hideGlobals = [
+        'process', 'global' //,'setTimeout','setInterval','setImmediate','clearImmediate','clearInterval','clearTimeout'    
+    ];
+    const utils = module.exports;
+    const refNames = ['utils', 'utils_1', 'Promise', 'console'];
+    const refValues = [utils, utils, Promise, console];
+    lodash_1.default.keys(externalReferences).forEach(key => {
+        refNames.push(key);
+        refValues.push(externalReferences[key]);
+    });
+    const compiledJs = exports.AsyncFunction.apply(null, [...refNames, ...hideGlobals, '"use strict";\n' + jsCode]);
+    return compiledJs.apply(null, refValues);
+}
+function toJSON(obj) {
+    //console.log('toJSON');
+    const knownObjs = [];
+    const objRefs = [];
+    const newObjs = [];
+    let refCount = 0;
+    function recurse(obj) {
+        // stringify values
+        if (Number.isNaN(obj))
+            return "NaN";
+        if (obj === undefined)
+            return "undefined";
+        if (obj === Infinity)
+            return "Infinity";
+        if (obj instanceof RegExp)
+            return ("__REGEXP " + obj.toString());
+        //   if(isDate(obj))
+        //       return "__DATE " + obj.toISOString();
+        if (lodash_1.default.isDate(obj))
+            return obj.toISOString();
+        if (lodash_1.default.isFunction(obj))
+            return '__FUNCTION ' + obj.toString();
+        if (lodash_1.default.isElement(obj)) {
+            return "__HTML " + obj.outerHTML;
+        }
+        if (typeof window !== 'undefined' && window && obj === window) {
+            return "__WINDOW";
+        }
+        if (lodash_1.default.isError(obj)) {
+            return "__ERROR " + obj.stack;
+        }
+        // non-objects can just be returned at this point
+        if (!(isObject(obj) || lodash_1.default.isArray(obj))) {
+            return obj;
+        }
+        // if we've found a duplicate reference, deal with it
+        var iObj = knownObjs.indexOf(obj);
+        if (iObj >= 0) {
+            var ref = objRefs[iObj];
+            var nObj = newObjs[iObj];
+            if (lodash_1.default.isArray(nObj) && (!lodash_1.default.isString(nObj[0]) || !nObj[0].match(/^__this_ref:/)))
+                nObj.unshift("__this_ref:" + ref);
+            else if (isObject(nObj) && !nObj.__this_ref)
+                nObj.__this_ref = ref;
+            return ref;
+        }
+        // capture references in case we need them later
+        refCount++;
+        var newRef = "__duplicate_ref_" + (lodash_1.default.isArray(obj) ? "ary_" : "obj_") + refCount;
+        var nObj = lodash_1.default.isArray(obj) ? [] : {};
+        knownObjs.push(obj);
+        objRefs.push(newRef);
+        newObjs.push(nObj);
+        // recurse on properties
+        if (lodash_1.default.isArray(obj))
+            for (var i = 0; i < obj.length; i++)
+                nObj.push(recurse(obj[i])); // use push so offset from reference capture doesn't mess things up
+        else
+            for (var key in obj) {
+                if (!(obj && obj.hasOwnProperty && obj.hasOwnProperty(key)))
+                    continue;
+                var value = recurse(obj[key]);
+                if (key[0] == '$') // escape leading dollar signs
+                    key = '__DOLLAR_' + key.substr(1);
+                nObj[key] = value;
+            }
+        return nObj;
+    }
+    obj = recurse(obj);
+    return obj;
+}
+function fromJSON(obj, externalReferences) {
+    //console.log('fromJSON');
+    var dup_refs = {};
+    function recurse(obj) {
+        if (lodash_1.default.isString(obj)) {
+            // restore values
+            if (obj === "undefined")
+                return undefined;
+            if (obj === "NaN")
+                return NaN;
+            if (obj === "Infinity")
+                return Infinity;
+            if (obj.match(/^__REGEXP /)) {
+                var m = obj.split("__REGEXP ")[1].match(/\/(.*)\/(.*)?/);
+                return new RegExp(m[1], m[2] || "");
+            }
+            if (obj.match(/^\d{4}-\d{2}-\d{2}T\d{2}\:\d{2}\:\d{2}\.\d{3}Z$/)) {
+                return new Date(obj);
+            }
+            if (obj.match(/^__FUNCTION /)) {
+                return js(obj.substring(11), externalReferences);
+            }
+            if (obj.match(/^__HTML /)) {
+                //@ts-ignore 
+                if (typeof $ !== 'undefined')
+                    return $(obj.substring(7))[0];
+                else
+                    return obj;
+            }
+            if (obj.startsWith("__ERROR ")) {
+                let error = new Error();
+                error.stack = obj.substring(8);
+                return error;
+            }
+            if (obj === "__WINDOW") {
+                return window;
+            }
+            // deal with duplicate refs
+            if (obj.match(/^__duplicate_ref_/)) {
+                if (!dup_refs[obj])
+                    dup_refs[obj] = obj.match(/_obj_/) ? {} : [];
+                return dup_refs[obj];
+            }
+        }
+        if (!(isObject(obj) || lodash_1.default.isArray(obj)))
+            return obj;
+        // deal with objects that have duplicate refs
+        var dup_ref = null;
+        obj = lodash_1.default.clone(obj); // don't mess up the original JSON object
+        if (lodash_1.default.isArray(obj) && lodash_1.default.isString(obj[0]) && obj[0].match(/^__this_ref:/))
+            dup_ref = obj.shift().split(':')[1];
+        else if (obj.__this_ref) {
+            dup_ref = obj.__this_ref;
+            delete obj.__this_ref;
+        }
+        var mObj = lodash_1.default.isArray(obj) ? [] : {};
+        if (dup_ref)
+            if (!dup_refs[dup_ref])
+                dup_refs[dup_ref] = mObj;
+            else
+                mObj = dup_refs[dup_ref];
+        // restore keys and recurse on objects
+        for (var key in obj) {
+            if (!obj.hasOwnProperty(key))
+                continue;
+            var value = recurse(obj[key]);
+            if (key.match(/^__DOLLAR_/))
+                key = '$' + key.substr(9);
+            mObj[key] = value;
+        }
+        return mObj;
+    }
+    obj = recurse(obj);
+    return obj;
+}
+// export type IObjectMatch<T> = {
+//   [key in keyof T]?: RegExp | string | number | boolean
+// }
+// export function objectMatch<T>(value: T, match: IObjectMatch<T>): boolean {
+//   for (const [k, _m] of Object.entries(match)) {
+//     const m = _m as any;
+//     if (m === undefined) continue; // NOTE we are not trying to match undefined values
+//     // NOTE null will match null or undefined
+//     if (m === null && (value[k] === null || value[k] === undefined)) {
+//       return true
+//     }
+//     if (_.isRegExp(m)) {
+//       if (!String(value[k]).match(m)) {
+//         return false;
+//       }
+//     } else if (m != value[k]) {
+//       return false;
+//     }
+//   }
+//   return true;
+// }
+// @ts-ignore
+if (typeof window !== 'undefined')
+    window.utils = module.exports;

package/docs/conversation-tab.md

@@ -0,0 +1,201 @@
+# Conversation Tab Implementation Plan
+
+## Current State Analysis
+
+### Existing Thread/Conversation System
+The codebase has a robust thread/conversation system with the following components:
+
+#### **Data Model**
+- **IMessage interface** with hierarchical threading via `messageParentId`
+- **Thread Logic**: Parent message + replies with same `messageParentId`
+- **Channel Integration**: Threads exist within channels but are filtered from main channel view
+
+#### **State Management**
+```typescript
+// Existing persistent variables in globals.tsx
+openThreads: persistentVar<(string | IMessage)[]>  // Array of open thread IDs
+threadViewOpen: persistentVar<boolean>              // Controls side panel visibility
+openThread(thread): Function                        // Opens thread in side panel
+```
+
+#### **Existing Components**
+- **ThreadContainer**: Main thread UI with tabbed interface for multiple threads
+- **ThreadMessageList**: Displays messages within specific thread
+- **MessageDisplay**: Individual message rendering with thread context
+- **OpenThreads**: Dropdown for thread switching
+
+#### **Current Limitations**
+- ❌ No URL routing for threads (`/threads/[id]`)
+- ❌ No standalone thread detail views (always side panel)
+- ❌ No deep-linking to specific conversations
+- ❌ No integration with tabs system
+
+## Implementation Plan: Phase 1 - Conversation Tabs
+
+### **Goal**: Integrate existing thread system with tabs architecture
+
+### **Step 1: Thread Routing Integration**
+Add thread detail routes to main Router component:
+
+```typescript
+// In router.tsx
+if (path.match(/^threads\/([a-zA-Z0-9]{25})/)) {
+  const threadId = path.split('/')[1];
+  return <ThreadDetailView threadId={threadId} />;
+}
+```
+
+### **Step 2: Create ThreadDetailView Component**
+New component that renders thread as main content instead of side panel:
+
+```typescript
+// src/screens/threads/thread-details.tsx
+export const ThreadDetails = (props: { threadId: string }) => {
+  const thread = usePromise(async () => {
+    const parentMessage = await Messages().get(props.threadId);
+    if (!parentMessage) return null;
+    updateActiveTabTitle(`Thread: ${parentMessage.message.slice(0, 30)}...`);
+    return parentMessage;
+  }, [props.threadId]);
+
+  // Render thread messages in main content area
+  return <ThreadMessageList threadId={props.threadId} />;
+};
+```
+
+### **Step 3: Thread System App Enhancement**
+Update the threads system app to support individual thread opening:
+
+```typescript
+// src/system-apps/threads.app.ts
+export const threadsApp: IAppNav = {
+  name: 'Threads',
+  iconClassName: 'bi-cpu',
+  navigationPath: 'shell', // Main shell for overview
+  alwaysNewTab: false      // Allow switching to existing thread list
+};
+
+// New system app for individual conversations
+export const conversationApp: IAppNav = {
+  name: 'Conversation',
+  iconClassName: 'bi-chat-dots',
+  navigationPath: 'threads/',  // Will be dynamic per thread
+  alwaysNewTab: true          // Each conversation gets its own tab
+};
+```
+
+### **Step 4: Thread Opening Integration**
+Modify existing `openThread()` function to support both side panel and tab modes:
+
+```typescript
+// Enhanced openThread function
+const openThreadInTab = (threadId: string, messagePreview?: string) => {
+  const threadPath = `threads/${threadId}`;
+  const threadTitle = messagePreview 
+    ? `Thread: ${messagePreview.slice(0, 30)}...`
+    : 'Thread';
+
+  // Open thread in new tab
+  onOpenTab({
+    packageId: 'system-apps',
+    path: threadPath,
+    title: threadTitle,
+    iconClassName: 'bi-chat-dots',
+    closable: true
+  }, true); // Always new tab for threads
+};
+```
+
+### **Step 5: State Migration Strategy**
+**Option A: Merge openThreads into activeTabs**
+- Convert existing `openThreads` entries to tab format
+- Remove separate thread state management
+- Rely on activeTabs for persistence
+
+**Option B: Parallel Systems (Recommended Phase 1)**
+- Keep existing `openThreads` for side panel (backwards compatibility)
+- Add new tab-based thread opening
+- Allow users to choose: quick side panel vs dedicated tab
+
+### **Step 6: Thread List Enhancement**
+Create a thread list view for the main "Threads" app:
+
+```typescript
+// src/screens/threads/thread-list.tsx
+export const ThreadList = () => {
+  // Show user's recent threads/conversations
+  // Each thread gets "Open in Tab" button
+  // Integration with search functionality
+};
+```
+
+## Benefits of Tab-Based Threads
+
+### **User Experience**
+- **Multiple Conversations**: Several AI chats open simultaneously
+- **Context Preservation**: Threads survive app reloads
+- **Deep Linking**: Direct URLs to specific conversations  
+- **Mobile Friendly**: Tabs work better than sliding panels on mobile
+
+### **Technical Benefits**  
+- **Consistent Architecture**: Threads follow same patterns as other detail screens
+- **Dynamic Titles**: Smart titles showing conversation context
+- **Search Integration**: Threads appear in app launcher search
+- **Grid Layout Ready**: Perfect foundation for Phase 2 grid system
+
+## Implementation Phases
+
+### **Phase 1: Basic Thread Tabs** (This Plan)
+- [ ] Add thread routing to Router component
+- [ ] Create ThreadDetails component
+- [ ] Update openThread function for tab support
+- [ ] Add thread list view
+- [ ] Update system apps configuration
+
+### **Phase 2: State Unification**
+- [ ] Migrate openThreads data to activeTabs
+- [ ] Remove duplicate thread state management
+- [ ] Enhance thread persistence and sync
+
+### **Phase 3: Advanced Features**
+- [ ] Thread search and filtering
+- [ ] Conversation previews in app launcher
+- [ ] Thread grouping and organization
+- [ ] Integration with AI assistant selection
+
+### **Phase 4: Grid Layout Integration** (Future)
+- [ ] Split screen: content + conversation
+- [ ] Multiple conversations in grid cells
+- [ ] Flexible conversation positioning
+- [ ] Context-aware conversation suggestions
+
+## Technical Considerations
+
+### **Thread ID Format**
+- Existing thread IDs are message IDs (25-character strings)
+- URL pattern: `/threads/[messageId]`
+- Compatible with existing message lookup
+
+### **Title Generation Strategy**
+```typescript
+const generateThreadTitle = (parentMessage: IMessage): string => {
+  // Use first 30 characters of parent message
+  const preview = parentMessage.message.slice(0, 30);
+  return `Thread: ${preview}${parentMessage.message.length > 30 ? '...' : ''}`;
+};
+```
+
+### **Integration Points**
+- **Router**: Add thread routing patterns  
+- **ThreadMessageList**: Reuse existing component
+- **TabsLayout**: Thread tabs with conversation icons
+- **App Launcher**: Threads searchable and launchable
+
+## Migration Path
+
+1. **Implement parallel systems** (old side panel + new tabs)
+2. **User choice** during transition period
+3. **Gradual migration** of state and preferences  
+4. **Remove legacy** side panel system once tabs proven
+
+This approach ensures no disruption to existing users while providing enhanced capabilities for power users who want multiple conversations open simultaneously.