@messenger-box/tailwind-ui-inbox 10.0.3-alpha.100

package/lib/components/filler-components/RightSiderBar.js

@@ -0,0 +1,335 @@
+import*as React from'react';import {HybridLiveEditor}from'../live-code-editor/hybrid-live-editor.js';import {useOnChatMessageAddedSubscription}from'common/graphql';const RightSidebarFillComponent = props => {
+  const {
+    channelId,
+    detailSidebarOptions,
+    windowWidth,
+    windowHeight,
+    activeTab,
+    messages,
+    selectedPost,
+    setIsLoading,
+    isLoading
+  } = props;
+  const hybridLiveEditorRef = React.useRef(null);
+  const previewIframeRef = React.useRef(null);
+  // State for subscription data and active fragment
+  const [subscriptionData, setSubscriptionData] = React.useState(null);
+  const [activeFragment, setActiveFragment] = React.useState(null);
+  const [currentFiles, setCurrentFiles] = React.useState({});
+  const [canvasLayers, setCanvasLayers] = React.useState([]);
+  // const [isLoading, setIsLoading] = React.useState(false);
+  // Component mount tracking
+  React.useMemo(() => `right-sidebar-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`, []);
+  const handleCopyToClipboard = React.useCallback(text => {
+    navigator.clipboard.writeText(text);
+  }, []);
+  const handleFileUpdate = React.useCallback(async (filePath, content) => {
+    // TODO: Implement file update logic for the channel
+    console.log('File update:', {
+      filePath,
+      content
+    });
+  }, []);
+  // Create complete file context by merging currentFiles with activeFragment files
+  const completeFileContext = React.useMemo(() => {
+    if (!activeFragment?.files) {
+      console.log('📂 Using currentFiles as complete context (no activeFragment.files)');
+      return currentFiles;
+    }
+    // Merge currentFiles with activeFragment files, giving priority to activeFragment files
+    const merged = {
+      ...currentFiles
+    };
+    // Override with activeFragment files (these are the most recent changes)
+    Object.entries(activeFragment.files).forEach(([path, content]) => {
+      merged[path] = content;
+    });
+    // Validate file context integrity
+    const hasPackageJson = 'package.json' in merged;
+    const hasMainFiles = Object.keys(merged).some(path => path.includes('index.') || path.includes('main.') || path.includes('App.') || path.includes('src/'));
+    console.log('📂 Complete file context created:', {
+      currentFilesCount: Object.keys(currentFiles).length,
+      activeFragmentFilesCount: Object.keys(activeFragment.files).length,
+      mergedFilesCount: Object.keys(merged).length,
+      hasPackageJson,
+      hasMainFiles,
+      activeFragmentFiles: Object.keys(activeFragment.files),
+      allFiles: Object.keys(merged),
+      validation: {
+        isComplete: hasPackageJson && hasMainFiles,
+        missingPackageJson: !hasPackageJson,
+        missingMainFiles: !hasMainFiles
+      }
+    });
+    if (!hasPackageJson) {
+      console.warn('⚠️ File context missing package.json - this may cause issues in sandbox');
+    }
+    if (!hasMainFiles) {
+      console.warn('⚠️ File context missing main application files - this may cause issues in sandbox');
+    }
+    return merged;
+  }, [currentFiles, activeFragment?.files]);
+  // Determine if we should show preview or editor based on activeTab
+  const isPreviewMode = activeTab === 'preview';
+  const {
+    data: chatMessageAddedData
+  } = useOnChatMessageAddedSubscription({
+    variables: {
+      channelId: channelId?.toString() || ''
+    },
+    skip: !channelId
+  });
+  // Turn on loader when new data is about to be processed
+  React.useEffect(() => {
+    if (chatMessageAddedData?.chatMessageAdded || selectedPost) ;
+  }, [chatMessageAddedData, selectedPost]);
+  // Handle subscription data updates - prefer response update structure like use-ai-messages.ts
+  React.useEffect(() => {
+    if (chatMessageAddedData?.chatMessageAdded || selectedPost) {
+      // Prefer explicitly selected post to ensure UI updates when it changes
+      const message = selectedPost || chatMessageAddedData?.chatMessageAdded;
+      // console.log('=== SUBSCRIPTION MESSAGE DEBUG ===');
+      // console.log('Full message:', JSON.stringify(message, null, 2));
+      // console.log('Message props:', message.props);
+      // console.log('Message propsConfiguration:', message.propsConfiguration);
+      // Extract strictly from message.propsConfiguration (fragment only)
+      let extracted = null;
+      let fragmentSource = null;
+      try {
+        // 1) Preferred: contents.props.fragment
+        const cfg = message.propsConfiguration || {};
+        const contents = cfg.contents || cfg.content || {};
+        if (contents?.props?.fragment) {
+          const frag = contents.props.fragment;
+          extracted = {
+            sandboxUrl: frag.sandboxUrl || frag.url,
+            sandboxId: frag.sandboxId,
+            projectId: cfg.projectId || contents.projectId || frag.projectId,
+            modelConfig: cfg.modelConfig || contents.modelConfig || frag.modelConfig,
+            files: frag.files || {},
+            canvasLayers: contents.canvasLayers || cfg.canvasLayers || frag.canvasLayers,
+            summary: contents.summary || cfg.summary || frag.summary,
+            title: frag.title || contents.title || cfg.title,
+            isError: frag.isError
+          };
+          fragmentSource = 'propsConfiguration.contents.props.fragment';
+        }
+        // 2) Fallback: contents.fragment
+        if (!extracted && contents?.fragment) {
+          const frag = contents.fragment;
+          extracted = {
+            sandboxUrl: frag.sandboxUrl || frag.url,
+            sandboxId: frag.sandboxId,
+            projectId: cfg.projectId || contents.projectId || frag.projectId,
+            modelConfig: cfg.modelConfig || contents.modelConfig || frag.modelConfig,
+            files: frag.files || {},
+            canvasLayers: contents.canvasLayers || cfg.canvasLayers || frag.canvasLayers,
+            summary: contents.summary || cfg.summary || frag.summary,
+            title: frag.title || contents.title || cfg.title,
+            isError: frag.isError
+          };
+          fragmentSource = 'propsConfiguration.contents.fragment';
+        }
+        // 3) Fallback: propsConfiguration.fragment (top-level)
+        if (!extracted && cfg?.fragment) {
+          const frag = cfg.fragment;
+          extracted = {
+            sandboxUrl: frag.sandboxUrl || frag.url,
+            sandboxId: frag.sandboxId,
+            projectId: cfg.projectId || frag.projectId,
+            modelConfig: cfg.modelConfig || frag.modelConfig,
+            files: frag.files || {},
+            canvasLayers: cfg.canvasLayers || frag.canvasLayers,
+            summary: cfg.summary || frag.summary,
+            title: frag.title || cfg.title,
+            isError: frag.isError
+          };
+          fragmentSource = 'propsConfiguration.fragment';
+        }
+      } catch (error) {
+        console.error('Error extracting response from message:', error);
+      }
+      // console.log('Extracted response fragment source:', fragmentSource);
+      // console.log('Extracted response:', extracted);
+      if (extracted && (extracted.sandboxUrl || extracted.url)) {
+        console.log('✅ Processing response update:', extracted);
+        // Update subscription data snapshot
+        setSubscriptionData(extracted);
+        // Build active fragment
+        const fragment = {
+          id: message.id,
+          sandboxUrl: extracted.sandboxUrl || extracted.url,
+          title: extracted.title || 'Generated Code',
+          files: extracted.files || {},
+          projectId: extracted.projectId,
+          modelConfig: extracted.modelConfig,
+          canvasLayers: extracted.canvasLayers,
+          summary: extracted.summary,
+          isError: extracted.isError
+        };
+        // If canvasLayers missing but present in summary, attempt to extract like use-ai-messages
+        if ((!fragment.canvasLayers || !Array.isArray(fragment.canvasLayers)) && fragment.summary) {
+          try {
+            const match = fragment.summary.match(/<canvas_layers>([\s\S]*?)<\/canvas_layers>/);
+            if (match) {
+              const parsed = JSON.parse(match[1]);
+              if (Array.isArray(parsed)) {
+                fragment.canvasLayers = parsed;
+              }
+            }
+          } catch (e) {
+            console.warn('Failed to parse canvas layers from summary:', e);
+          }
+        }
+        console.log('✅ Setting active fragment:', fragment);
+        setActiveFragment(fragment);
+        // Update files into local state for editor
+        if (fragment.files) {
+          console.log('✅ Setting current files:', Object.keys(fragment.files));
+          setCurrentFiles(fragment.files);
+        }
+        // Update canvas layers if available
+        if (fragment.canvasLayers && Array.isArray(fragment.canvasLayers)) {
+          console.log('Received canvas layers from AI:', fragment.canvasLayers);
+          setCanvasLayers(fragment.canvasLayers);
+        } else {
+          console.log('No canvas layers found in response');
+        }
+        // setIsLoading(false);
+      } else {
+        console.log('❌ No valid response found in message');
+        // setIsLoading(false);
+      }
+    }
+  }, [chatMessageAddedData, selectedPost]);
+  // When switching tabs or when sandbox changes, show loader until ready
+  // React.useEffect(() => {
+  //     if (isPreviewMode) {
+  //         if (activeFragment?.sandboxUrl) {
+  //            // setIsLoading(true);
+  //         }
+  //     } else {
+  //         // In code view, briefly show loader while editor reacts to new files
+  //        // setIsLoading(true);
+  //         const timeoutId = setTimeout(() => setIsLoading(false), 400);
+  //         return () => clearTimeout(timeoutId);
+  //     }
+  // }, [isPreviewMode, activeFragment?.sandboxUrl, completeFileContext]);
+  // Cleanup iframe resources on unmount to prevent renderer leaks in Chrome
+  React.useEffect(() => {
+    return () => {
+      try {
+        if (previewIframeRef.current) {
+          previewIframeRef.current.src = 'about:blank';
+        }
+      } catch (e) {
+        // no-op
+      }
+    };
+  }, []);
+  return React.createElement("div", {
+    className: "right-sidebar-content h-full flex flex-col"
+  }, React.createElement("div", {
+    className: "flex-1 overflow-hidden",
+    style: {
+      height: 'calc(100vh - 140px)'
+    }
+  }, isPreviewMode ?
+  // Preview Mode - Show sandbox iframe or fallback
+  (() => {
+    if (activeFragment?.sandboxUrl) {
+      return React.createElement("div", {
+        className: "w-full h-full relative",
+        style: {
+          minHeight: '400px',
+          backgroundColor: '#f0f0f0'
+        }
+      }, React.createElement("iframe", {
+        key: activeFragment.sandboxUrl,
+        ref: previewIframeRef,
+        src: activeFragment.sandboxUrl,
+        className: "w-full h-full border border-gray-200 rounded-md bg-white shadow-sm",
+        title: "Live Preview",
+        sandbox: "allow-scripts allow-same-origin allow-forms allow-popups allow-modals allow-orientation-lock allow-pointer-lock allow-presentation allow-storage-access-by-user-activation allow-top-navigation-by-user-activation",
+        loading: "lazy",
+        onLoad: () => {
+          console.log('🎯 Iframe loaded successfully');
+          setIsLoading(false);
+        },
+        onError: e => {
+          console.error('❌ Iframe error:', e);
+          setIsLoading(false);
+        },
+        style: {
+          minHeight: '400px'
+        }
+      }), React.createElement("div", {
+        className: "absolute top-2 right-2 bg-green-100 text-green-800 px-2 py-1 rounded text-xs z-10"
+      }, "Live Preview"), isLoading && React.createElement(React.Fragment, null, React.createElement("div", {
+        className: "absolute inset-0 bg-white/60 flex items-center justify-center z-20"
+      }, React.createElement("div", {
+        className: "animate-spin rounded-full h-12 w-12 border-4 border-blue-500 border-t-transparent"
+      })), React.createElement("div", {
+        className: "absolute top-2 left-2 bg-blue-100 text-blue-800 px-2 py-1 rounded text-xs z-30"
+      }, "Loading...")));
+    } else {
+      return React.createElement("div", {
+        className: "h-full flex items-center justify-center text-gray-500 border border-gray-200 rounded-md bg-gray-50"
+      }, React.createElement("div", {
+        className: "text-center space-y-3"
+      }, React.createElement("p", {
+        className: "font-medium"
+      }, "No preview available"), React.createElement("div", {
+        className: "flex flex-col items-center justify-center space-y-3"
+      }, isLoading ? React.createElement("div", {
+        className: "animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500"
+      }) : React.createElement("div", {
+        className: "w-8 h-8 bg-gray-300 rounded-full"
+      }), React.createElement("p", {
+        className: "text-sm text-gray-400"
+      }, isLoading ? 'Generating code...' : 'Waiting for code generation...'))));
+    }
+  })() :
+  // Code Editor Mode - Show files from subscription or fallback
+  React.createElement("div", {
+    className: "h-full w-full relative",
+    style: {
+      height: '100%',
+      minHeight: '500px'
+    }
+  }, React.createElement(HybridLiveEditor, {
+    ref: hybridLiveEditorRef,
+    projectId: activeFragment?.projectId || channelId,
+    fragmentId: activeFragment?.id || activeTab || 'default',
+    files: Object.keys(completeFileContext).length > 0 ? completeFileContext : {},
+    sandboxUrl: activeFragment?.sandboxUrl,
+    onCopyToClipboard: handleCopyToClipboard,
+    onFileUpdate: handleFileUpdate,
+    readOnly: !activeFragment?.id,
+    autoSave: false,
+    debounceMs: 500,
+    className: "h-full w-full"
+  }), isLoading && React.createElement(React.Fragment, null, React.createElement("div", {
+    className: "absolute inset-0 bg-white/60 flex items-center justify-center z-20"
+  }, React.createElement("div", {
+    className: "animate-spin rounded-full h-12 w-12 border-4 border-blue-500 border-t-transparent"
+  })), React.createElement("div", {
+    className: "absolute top-4 right-4 bg-blue-100 border border-blue-400 text-blue-700 px-3 py-2 rounded text-sm z-30"
+  }, React.createElement("div", {
+    className: "flex items-center gap-2"
+  }, React.createElement("div", {
+    className: "animate-spin rounded-full h-4 w-4 border-b-2 border-blue-500"
+  }), "Processing..."))))), React.createElement("div", {
+    className: "p-2 border-t bg-gray-50 text-xs text-gray-500"
+  }, React.createElement("div", {
+    className: "flex justify-between"
+  }, React.createElement("span", null, "Mobile: ", detailSidebarOptions.isMobileView ? 'Yes' : 'No'), React.createElement("span", null, "Desktop: ", detailSidebarOptions.isDesktopView ? 'Yes' : 'No'), activeFragment && React.createElement("span", {
+    className: "text-green-600"
+  }, activeFragment.isError ? 'Error' : 'Ready')), activeFragment && React.createElement("div", {
+    className: "mt-1 text-xs"
+  }, React.createElement("span", {
+    className: "text-gray-400"
+  }, "Files: ", Object.keys(completeFileContext).length), canvasLayers.length > 0 && React.createElement("span", {
+    className: "ml-2 text-gray-400"
+  }, "Layers: ", canvasLayers.length))));
+};export{RightSidebarFillComponent};//# sourceMappingURL=RightSiderBar.js.map

package/lib/components/filler-components/RightSiderBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RightSiderBar.js","sources":["../../../src/components/filler-components/RightSiderBar.tsx"],"sourcesContent":[null],"names":[],"mappings":"oKAyBO,MAAM,yBAAyB,GAAG,KAAC,IAA0B;QAChE;IAYA,SAAM;IACN,oBAAM;IAEN,WAAA;AACA,IAAA,YAAO;AACP,IAAA,SAAO;AACP,IAAA,QAAO;AACP,IAAA,YAAO;IACP,YAAA;IAEA;AACA,GAAA,GAAA,KAAM;QAKN,mBAAM,GAAA,KAAwB,CAAA;AAC1B,EAAA,MAAA,gBAAU,GAAS,YAAW,CAAA,IAAM,CAAA;;AAGxC,EAAA,MAAA,CAAA,gBAAM,EAAgB,mBAAoB,CAAC,GAAA,KAAO,CAAA,QAAkB,CAAA,IAAA,CAAA;QAChE,CAAA,cAAA,EAAA,iBAAA,CAAA,GAAA,KAAA,CAAA,QAAoD,CAAA,IAAA,CAAA;QACpD,CAAA,YAAY,EAAA,eAAkB,CAAA,GAAA,KAAQ,CAAE,QAAO,CAAE,EAAE,CAAA;QACpD,CAAE,YAAE,EAAA,eAAA,CAAA,GAAA,KAAA,CAAA,QAAA,CAAA,EAAA,CAAA;;AAGP;AACI,EAAK,KAAc,CAAA,QAAS,MAAC,CAAA,cAAA,EAAA,IAAA,CAAA,GAAA,EAAA,CAAA,CAAA,EAAA,IAAA,CAAA,MAAA,EAAA,CAAA,QAAA,CAAA,EAAA,CAAA,CAAA,MAAA,CAAA,CAAA,EAAA,CAAA,CAAA,CAAA,CAAA,EAAA,EAAA;AACzB,EAAA,MAAA,qBAAY,GAAA,KAAA,CAAA,WAAA,CAAA,IAAA,IAAA;AACZ,IAAA,SAAA,CAAA,mBAAoB,CAAA,IAAA,CAAA;QACxB;QAEA,gBAAA,GAAA,KAAA,CAAA,WAAA,CAAA,OAAA,QAAA,EAAA,OAAA,KAAA;AACA;WAEA,CAAA,GAAA,CAAA,cAAA,EAAA;AACA,MAAA,QAAM;AACF,MAAA;AACJ,KAAA,CAAA;QAEA;AACA;QACA,sBAAqB,KAAM,CAAC,OAAK,CAAA,MAAQ;AAKzC,IAAA,IAAA,CAAA,cAAY,EAAA,KAAA,EAAA;aACR,CAAA,GAAA,CAAA,qEAAmD,CAAA;aACnD,YAAA;;;gBAGA,GAAA;;AAEA,KAAA;AACA;kBACI,CAAA,cAAY,CAAA,KAAA,CAAA,CAAA,OAAkB,CAAA,CAAA,CAAA,IAAA,EAAA,OAAY,CAAA,KAAA;iBAC1C,CAAA,GAAA,OAAA;;AAEH;AACJ,IAAA,MAAC,cAAC,GAAA,cAAA,IAAA,MAAA;UAEH,YAAK,GAAA,MAAiB,CAAA,IAAA,CAAA,MAAA,CAAA,CAAA,IAAA,CAAA,IAAA,IAAA,IAAA,CAAA,QAAA,CAAA,QAAA,CAAA,IAAA,IAAA,CAAA,QAAA,CAAA,OAAA,CAAA,IAAA,IAAA,CAAA,QAAA,CAAA,MAAA,CAAA,IAAA,IAAA,CAAA,QAAA,CAAA,MAAA,CAAA,CAAA;AAClB,IAAA,OAAA,CAAA,GAAA,CAAA,mCAAa,EAAA;uBAChB,EAAA,MAAA,CAAA,IAAA,CAAA,YAAA,CAAA,CAAA,MAAA;8BACmB,EAAA,MAAA,CAAA,IAAA,CAAA,cAAA,CAAA,KAAA,CAAA,CAAA,MAAA;AAChB,MAAA,gBAAQ,EAAI,MAAC,CAAA,IAAA,CAAA,MAAA,CAAA,CAAA,MAAA;oBAChB;AAED,MAAA;MACH,gCAAiC,CAAA,cAAQ,CAAA,KAAA,CAAA;MAE1C,QAAA,EAAA,MAAA,CAAA,IAAA,CAAA,MAAA,CAAA;AACA,MAAA,UAAM,EAAA;AAEN,QAAA,UAAc,oBAAoB;QAC9B,kBAAa,EAAA,CAAA,cAAsB;QACnC,gBAAgB,EAAA,CAAA;AACnB;KAED,CAAA;AACA,IAAA,IAAA,CAAK,cAAc,EAAE;AACjB,MAAA,sFAA6D,CAAA;;QAE7D,CAAC,YAAA,EAAA;AACL,aAAI,CAAA,IAAA,CAAA,mFAAqC,CAAA;IAEzC;AACA,IAAA,OAAM,MAAA;AACF,EAAA,CAAA,EAAA,CAAA,4BAA0B,EAAA,KAAA,CAAA,CAAA;;AAEtB,EAAA,MAAA,yBAAgB,KAAA,SAAgB;;;uCAGhC,CAAA;aACA,EAAA;eAEA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA;;;AAQA,GAAA,CAAA;;AAEI,EAAA,KAAA,CAAA,SAAA,CAAA;4BACM,EAAQ,gBAAoB,IAAI,YAAW,EAAI;AAIjD,EAAA,CAAA,EAAA,CAAA,oBAAA,EAAA,YAAY,CAAA,CAAA;AACR;wBACA;4BACA,EAAA,gBAAe,IAAS,YAAa,EAAA;;AAErC,MAAA,MAAA,OAAA,GAAA,YAAO,IAAK,oBAAW,EAAA,gBAAA;;;;;;sBAM3B,IAAA;wBACH,GAAA,IAAA;;AAGD;AACI,QAAA,MAAA,GAAA,GAAA,OAAM,CAAA,sBAAwB,EAAC;AAC/B,QAAA,MAAA,QAAA,GAAA,GAAA,CAAS,QAAG,IAAA,GAAA,CAAA,OAAA,IAAA,EAAA;AACR,QAAA,IAAA,QAAA,EAAA,KAAA,EAAA,QAAY,EAAA;+BACZ,CAAA,KAAW,CAAA,QAAK;;wBAEhB,IAAA,CAAA,UAAa,IAAI,IAAA,CAAA,GAAA;AACjB,YAAA,SAAA,EAAA,IAAA,CAAA,SAAY;0BACZ,CAAA,SAAY,IAAE,QAAS,CAAA,SAAA,IAAY,IAAO,CAAC,SAAA;yBAC3C,GAAA,CAAA,WAAS,IAAS,QAAO,CAAI,WAAW,IAAI,IAAI,CAAC,WAAO;wBACxD,KAAK,IAAE,EAAI;wBACX,EAAA,QAAS,CAAA,YAAY,IAAA,GAAA,CAAA,YAAA,IAAA,IAAA,CAAA,YAAA;qBACxB,QAAC,CAAA,OAAA,IAAA,GAAA,CAAA,OAAA,IAAA,IAAA,CAAA,OAAA;uBACF,CAAA,KAAA,IAAA;mBACH,EAAA,IAAA,CAAA;;AAGD,UAAA,cAAK,GAAA,4CAA6B;AAC9B,QAAA;AACA;AACI,QAAA,IAAA,CAAA,SAAA,IAAA,QAAU,EAAE;+BACZ,CAAA,QAAgB;AAChB,UAAA,SAAA,GAAA;AACA,YAAA,UAAA,EAAA,IAAA,CAAA,UAAa;AACb,YAAA,SAAA,EAAA,IAAA,CAAA,SAAY;AACZ,YAAA,SAAA,EAAA,GAAA,CAAA,SAAY,IAAE,kBAAoB,IAAI,IAAC,CAAA,SAAY;AACnD,YAAA,WAAA,EAAA,GAAA,CAAA,eAAoB,QAAQ,CAAC,WAAO,IAAA,IAAA,CAAA,WAAA;AACpC,YAAA,KAAA,EAAA,IAAA,CAAA,KAAK,IAAE,EAAI;wBACX,EAAA,QAAS,CAAA,YAAY,IAAA,GAAA,CAAA,YAAA,IAAA,IAAA,CAAA,YAAA;qBACxB,QAAC,CAAA,OAAA,IAAA,GAAA,CAAA,OAAA,IAAA,IAAA,CAAA,OAAA;uBACF,CAAA,KAAA,IAAA;mBACH,EAAA,IAAA,CAAA;;wBACS,GAAG,sCAAA;AACb,QAAA;;YAGJ,CAAA,SAAA,IAAA,GAAA,EAAA,QAAA,EAAA;gBACA,IAAA,GAAA,GAAA,CAAA,QAAA;AAEA,UAAA,SAAI,GAAA;AACA,YAAA,UAAA,EAAQ,IAAI;qBAEZ,EAAA,IAAA,CAAA,SAAA;qBACA,EAAA,GAAA,CAAA,SAAoB,IAAA,IAAA,CAAS,SAAE;uBAE/B,EAAA,GAAA,CAAA,WAAwB,IAAA,IAAA,CAAA,WAAA;AACxB,YAAA,KAAA,EAAA,cAAiB,EAAA;wBACT,EAAA,GAAA,CAAA,YAAU,IAAA,IAAA,CAAA,YAAA;AACd,YAAA,OAAA,EAAA,GAAA,CAAA,OAAY,IAAA,IAAA,CAAS;AACrB,YAAA,KAAA,EAAA,IAAA,CAAA,KAAO,IAAA,GAAS,CAAC,KAAK;AACtB,YAAA,OAAA,EAAA,IAAK,CAAA;;wBAEL,GAAA,6BAAkC;;oBAElC,EAAA;qBACA,CAAA,yCAA0B,EAAA,KAAA,CAAA;;;;AAK1B,MAAA,IAAA,SAAA,KAAI,SAAC,CAAA,UAAA,IAAA,SAAA,CAAA,GAAA,CAAA,EAAA;mDACuB,EAAA,SAAyB,CAAA;;4BAE7C,SAAM,CAAA;AACN;AACI,QAAA,MAAA,QAAA,GAAA;;+BAEP,CAAA,UAAA,IAAA,SAAA,CAAA,GAAA;0BACJ,CAAA,KAAA,IAAA,gBAAA;0BAAC,CAAO,KAAI,IAAA,EAAA;AACT,UAAA,SAAA,EAAA,SAAA,CAAO;qBACV,EAAA,SAAA,CAAA,WAAA;sBACJ,EAAA,SAAA,CAAA,YAAA;AAED,UAAA,OAAA,EAAA,SAAY;iBACZ,EAAA,SAAA,CAAA;;AAGA;AACI,QAAA,IAAA,CAAA,CAAA,QAAA,CAAA,YAAY,IAAA,CAAA,KAAA,CAAA,OAAA,CAAA,QAA4B,CAAA,YAAY,CAAA,KAAS,QAAQ,CAAA,OAAA,EAAA;AACrE,UAAA,IAAA;kBACH,KAAA,GAAA,QAAA,CAAA,OAAA,CAAA,KAAA,CAAA,4CAAA,CAAA;gBAED,KAAA,EAAA;AACA,cAAA,MAAI,MAAA,GAAS,IAAA,CAAA,KAAA,CAAA,KAAgB,CAAA,CAAA,CAAA,CAAA;uBACzB,CAAA,OAAW,CAAC,MAAA,CAAA,EAAA;AACZ,gBAAA,QAAA,CAAA,YAAgB,GAAA,MAAS;;;AAEzB,UAAA,CAAA,CAAA,OAAA,CAAA,EAAA;mBACH,CAAA,IAAA,CAAA,6CAAA,EAAA,CAAA,CAAA;;;mBAGG,CAAA,4BAAA,EAAA,QAAA,CAAA;AACJ,QAAA,iBAAQ,CAAA,QAAI,CAAA;;YAEhB,QAAC,CAAA,KAAA,EAAA;UACJ,OAAA,CAAA,GAAA,CAAA,0BAAA,EAAA,MAAA,CAAA,IAAA,CAAA,QAAA,CAAA,KAAA,CAAA,CAAA;AACL,UAAI,eAAA,CAAA,QAAsB,CAAA,KAAA,CAAA;QAE1B;;QAEA,IAAA,QAAA,CAAA,YAA2B,IAAA,KAAA,CAAA,OAAA,CAAA,QAAA,CAAA,YAAA,CAAA,EAAA;UAC3B,OAAA,CAAA,GAAA,CAAA,iCAA4C,EAAA,QAAA,CAAA,YAAA,CAAA;UAC5C,eAAA,CAAA,QAAA,CAAA,YAAoC,CAAA;QACpC,CAAA,MAAA;UACA,OAAA,CAAA,GAAe,CAAA,oCAAA,CAAA;QACf;;MAEA,CAAA,MAAA;QACA,OAAA,CAAA,GAAA,CAAA,sCAAgD,CAAA;;MAEhD;IAEA;AACA,EAAA,CAAA,EAAA,CAAA,oBAAqB,EAAA,YAAA,CAAA,CAAA;AACjB;AACI;AACI;AACI;;;;;;AAKZ;;AAGJ;AAEQ;;AAGQ,EAAA,KAAA,CAAA,SAAM,CAAA,MAAA;AACF,IAAA,OAAA,MAAI;AACA,MAAA,IAAA;AAKQ,QAAA,IAAA,gBAAA,CAAA,OAAA,EAAA;AASQ,UAAA,gBAAA,CAAA,OAAA,CAAO,GAAC,GAAI,aAAA;;AAEhB,MAAA,CAAA,CAAA,OAAA,CAAA,EAAA;AAEI;;;;AAQP,EAAA,OAAA,KAAA,CAAA,aAAA,CAAS,KACN,EAAA;;AAEQ,GAAA,EAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;uCAEJ;;;AAQhB;;;;AAKiB,IAAA,IAAA,cAAA,EAAA,UAAA,EAAA;AAKD,MAAA,OAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;iBAOnB,EAAA,wBAAA;AACL,QAAA,KACH,EAAE;UACC,SAAA,EAAA,OAAA;AACA,UAAA,eAAA,EAAA;AACI;AAaC,OAAA,EAAA,KAAA,CAAA,aACG,CAAA,QAAA,EAAA;2BACI,CAAA,UAAA;AACI,QAAA,GAAA,EAAA,gBAAA;2BAEJ,CAAA,UAAA;uFAC4C;6BACpC;AAEE,QAAA,OAAA,EAAA,oNAMxB;QAEN,OAAA,EAAA,MAAA;cACI,EAAA,MAAA;AACI,UAAA,OAAA,CAAA,GAAA,CAAA,+BAAA,CAAA;;;AACA,QAAA,OAAA,EAAA,CAAA,IAAA;;sBAAgB,CAAA,KAAA,CAAA;;AAKnB,QAAA,KAAA,EAAA;mBAEO,EAAA;;AAAwC,OAAA,CAAA,EAAA,KAAA,CAAA,aAAO,CAAA;iBAC9C,EAAA;;;AAQzB,OAAE,EAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/lib/components/inbox/FilesList.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+interface FilesListProps {
+    files: any[];
+    uploaded?: boolean;
+    FileElementProps?: Omit<FileElementProps, 'file' | 'uploaded' | 'onRemove'>;
+    onRemove?: () => Promise<void>;
+}
+interface FileElementProps {
+    file: any;
+    uploaded: boolean;
+    width?: number;
+    height?: number;
+    onRemove?: () => Promise<void>;
+}
+export declare function FilesList({ files, uploaded }: FilesListProps): React.JSX.Element;
+export declare namespace FilesList {
+    var FileElement: ({ file, uploaded, width, height }: FileElementProps) => React.JSX.Element;
+}
+export {};
+//# sourceMappingURL=FilesList.d.ts.map

package/lib/components/inbox/FilesList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilesList.d.ts","sourceRoot":"","sources":["../../../src/components/inbox/FilesList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAGjD,UAAU,cAAc;IACpB,KAAK,EAAE,GAAG,EAAE,CAAC;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gBAAgB,CAAC,EAAE,IAAI,CAAC,gBAAgB,EAAE,MAAM,GAAG,UAAU,GAAG,UAAU,CAAC,CAAC;IAC5E,QAAQ,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;CAClC;AAED,UAAU,gBAAgB;IACtB,IAAI,EAAE,GAAG,CAAC;IACV,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;CAClC;AAED,wBAAgB,SAAS,CAAC,EAAE,KAAK,EAAE,QAAgB,EAAE,EAAE,cAAc,qBAQpE;yBARe,SAAS;yDAU+C,gBAAgB"}

package/lib/components/inbox/FilesList.js

@@ -0,0 +1,68 @@
+import React__default,{useState,useMemo}from'react';import {useFileUrlQuery}from'common/graphql';function FilesList({
+  files,
+  uploaded = false
+}) {
+  return React__default.createElement("div", {
+    className: "flex flex-row"
+  }, files.map((file, index) => React__default.createElement(FilesList.FileElement, {
+    key: `${index}`,
+    uploaded: uploaded,
+    file: file
+  })));
+}
+FilesList.FileElement = ({
+  file,
+  uploaded,
+  width = 120,
+  height = 120
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const src = useMemo(() => uploaded ? file.url : URL.createObjectURL(file), [file, uploaded]);
+  const {
+    data
+  } = useFileUrlQuery({
+    variables: {
+      id: file?.id
+    },
+    skip: !file?.id
+  });
+  const onOpen = () => setIsOpen(true);
+  const onClose = () => setIsOpen(false);
+  return React__default.createElement(React__default.Fragment, null, React__default.createElement("img", {
+    className: "cursor-pointer m-2 object-cover rounded",
+    style: {
+      height: `${height}px`,
+      width: `${width}px`
+    },
+    src: src,
+    onClick: onOpen,
+    alt: "File preview"
+  }), isOpen && React__default.createElement("div", {
+    className: "fixed inset-0 z-50 flex items-center justify-center p-4"
+  }, React__default.createElement("div", {
+    className: "fixed inset-0 bg-black bg-opacity-75",
+    onClick: onClose
+  }), React__default.createElement("div", {
+    className: "relative bg-white rounded-lg shadow-xl max-w-4xl max-h-[90vh] overflow-hidden"
+  }, React__default.createElement("button", {
+    onClick: onClose,
+    className: "absolute top-4 right-4 z-10 p-2 rounded-full bg-black bg-opacity-50 hover:bg-opacity-70 transition-all duration-200"
+  }, React__default.createElement("svg", {
+    className: "w-6 h-6 text-white",
+    fill: "none",
+    stroke: "currentColor",
+    viewBox: "0 0 24 24"
+  }, React__default.createElement("path", {
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: 2,
+    d: "M6 18L18 6M6 6l12 12"
+  }))), React__default.createElement("div", {
+    className: "p-4 flex items-center justify-center"
+  }, React__default.createElement("img", {
+    src: data?.fileInfo?.url || src,
+    alt: "File full view",
+    className: "max-w-full max-h-[80vh] object-contain cursor-pointer",
+    onClick: onClose
+  })))));
+};export{FilesList};//# sourceMappingURL=FilesList.js.map

package/lib/components/inbox/FilesList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilesList.js","sources":["../../../src/components/inbox/FilesList.tsx"],"sourcesContent":[null],"names":["React"],"mappings":"iGAkBM,SAAU,SAAS,CAAC;AACtB,EAAA,KAAA;AAOJ,EAAC,QAAA,GAAA;AAED,CAAA,EAAA;SACIA,cAAO,CAAA,aAAiB,CAAC,KAAG,EAAA;AAC5B,IAAA,SAAS,EAAA;AACT,GAAA,EAAA,KAAM,CAAA,GAAE,CAAA,CAAI,IAAE,0BAAmB,CAAA,aAAA,CAAA,SAAA,CAAA,WAAA,EAAA;AAC7B,IAAA,GAAA,EAAA,CAAA,EAAA,KAAS,CAAA,CAAE;YACP,EAAE,QAAQ;AACb,IAAA,IAAA,EAAA;AACD,GAAA,CAAA,CAAA,CAAA;AACH;SAED,CAAM,WAAS,GAAK,CAAC;MACrB;AAEA,EAAA,QAAA;AAEQ,EAAA,KAAA,GAAA,GAAA;AASC,EAAA,MAAA,GAAA;AAGO,CAAA,KAAA;eAGA,EAAA,SAAA,CAAA,GAAA,QAAA,CAAA,KAAK,CAAA;AAED,EAAA,MAAA,GAAA,GAAA,OAAA,CAAA,MAAA,QAAA,GAAA,IAAA,CAAA,GAAA,sBAEI,CAAA,IAAA,CAAS,EAAC,CAAA,IAAA,EAAA,QAAA,CAAA,CAAA;AAEV,EAAA,MAAA;AACI,IAAA;qBAUR,CAAA;AACI,IAAA,SAAA,EAAA;AAY5B,MAAE,EAAA,EAAA,IAAA,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/lib/components/inbox/MessageItem.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+export declare function MessageItem({ message }: {
+    message: any;
+}): void;
+export declare namespace MessageItem {
+    var Plain: ({ message, index }: {
+        message: any;
+        index: any;
+    }) => React.JSX.Element;
+    var Dialog: ({ message, currentUser, index, onOpen }: {
+        message: any;
+        currentUser: any;
+        index: any;
+        onOpen: any;
+    }) => React.JSX.Element;
+}
+//# sourceMappingURL=MessageItem.d.ts.map

package/lib/components/inbox/MessageItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessageItem.d.ts","sourceRoot":"","sources":["../../../src/components/inbox/MessageItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,wBAAgB,WAAW,CAAC,EAAE,OAAO,EAAE,EAAE;IAAE,OAAO,EAAE,GAAG,CAAA;CAAE,QAAI;yBAA7C,WAAW"}

package/lib/components/inbox/MessageItem.js

@@ -0,0 +1,50 @@
+import React__default from'react';import {format}from'date-fns';import {BsFlag}from'@react-icons/all-files/bs/BsFlag.js';function MessageItem({
+  message
+}) {}
+MessageItem.Plain = function PlainMessageItem({
+  message,
+  index
+}) {
+  return React__default.createElement("div", {
+    className: "w-full flex justify-center mb-7",
+    key: `msgList_${index}`
+  }, React__default.createElement("p", {
+    className: "text-sm text-gray-600 font-bold"
+  }, message));
+};
+MessageItem.Dialog = function DialogMessageItem({
+  message,
+  currentUser,
+  index,
+  onOpen
+}) {
+  return React__default.createElement("div", {
+    className: "w-full flex justify-start mb-7",
+    key: `msgList_${index}`
+  }, React__default.createElement("div", {
+    className: "flex-grow flex"
+  }, React__default.createElement("div", {
+    className: "w-8 h-8 bg-gray-400 rounded-full mr-4 cursor-pointer overflow-hidden flex-shrink-0",
+    onClick: onOpen
+  }, message?.imageUrl ? React__default.createElement("img", {
+    src: message.imageUrl,
+    alt: "User avatar",
+    className: "w-full h-full object-cover"
+  }) : React__default.createElement("div", {
+    className: "w-full h-full bg-gray-400"
+  })), React__default.createElement("div", {
+    className: "flex-grow"
+  }, React__default.createElement("div", {
+    className: "flex flex-grow mt-1.5"
+  }, React__default.createElement("p", {
+    className: "text-sm text-gray-600 font-bold"
+  }, message?.author?.familyName && message?.author?.givenName ? message?.author?.givenName + ' ' + message?.author?.familyName : message?.author?.username), React__default.createElement("p", {
+    className: "text-sm text-gray-500 ml-2.5"
+  }, format(new Date(message?.createdAt), 'MMM dd, yyyy hh:mm aaa'))), React__default.createElement("p", {
+    className: "text-sm mt-1.5 text-gray-600 whitespace-pre-line"
+  }, message?.message))), currentUser?.id !== message?.author?.id && React__default.createElement("div", {
+    className: "ml-2"
+  }, React__default.createElement(BsFlag, {
+    className: "text-gray-600 w-6 h-6"
+  })));
+};export{MessageItem};//# sourceMappingURL=MessageItem.js.map

package/lib/components/inbox/MessageItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessageItem.js","sources":["../../../src/components/inbox/MessageItem.tsx"],"sourcesContent":[null],"names":["React"],"mappings":"kIAIgB,WAAW,CAAC;AAE5B,EAAA;IACI;WAEQ,CAAA,KAAA,GAAA,SAAA,iBAAa;AAGzB,EAAE,OAAA;AAEF,EAAA;;SAGYA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AACI,IAAA,SAAA,EAAA;kBAUA,EAAA,KAAA,CAAA;iCACI,CAAA,GAAA,EAAA;AACI,IAAA,SAAA,EAAA;AAEQ,GAAA,EAAA,OAAA,CAAA,CAAA;AACA,CAAA;AAER,WAAA,CAAA,MAAA,GAAA,SAAA,iBAAG;;AAOd,EAAA,WAAA;;AAOb,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/lib/components/inbox/ThreadItem.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+export interface IThreadItemProps {
+    currentUser?: any;
+    users?: any;
+    thread?: any;
+    onOpen: (channelId: any, postId: any) => void;
+    role?: any;
+    setData?: any;
+}
+export declare const ThreadItem: React.NamedExoticComponent<IThreadItemProps>;
+//# sourceMappingURL=ThreadItem.d.ts.map

package/lib/components/inbox/ThreadItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThreadItem.d.ts","sourceRoot":"","sources":["../../../src/components/inbox/ThreadItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAcvC,MAAM,WAAW,gBAAgB;IAC7B,WAAW,CAAC,EAAE,GAAG,CAAC;IAClB,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,MAAM,CAAC,EAAE,GAAG,CAAC;IACb,MAAM,EAAE,CAAC,SAAS,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,KAAK,IAAI,CAAC;IAC9C,IAAI,CAAC,EAAE,GAAG,CAAC;IACX,OAAO,CAAC,EAAE,GAAG,CAAC;CAEjB;AAgRD,eAAO,MAAM,UAAU,8CAAkC,CAAC"}