@luckydraw/cumulus 0.18.0 → 0.18.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
<html lang="en">
|
|
3
3
|
<head>
|
|
4
4
|
<meta charset="utf-8">
|
|
5
|
-
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
|
|
6
6
|
<title>Cumulus Chat</title>
|
|
7
7
|
<style>
|
|
8
8
|
html, body {
|
|
@@ -81,7 +81,7 @@
|
|
|
81
81
|
' box-shadow: 0 10px 36px rgba(0,0,0,0.55);',
|
|
82
82
|
'}',
|
|
83
83
|
'.cumulus-panel.standalone {',
|
|
84
|
-
' width: 100%; height: 100vh;',
|
|
84
|
+
' width: 100%; height: 100vh; height: 100dvh;',
|
|
85
85
|
' border: none; border-radius: 0;',
|
|
86
86
|
'}',
|
|
87
87
|
|
|
@@ -426,7 +426,7 @@
|
|
|
426
426
|
/* ── Standalone layout ── */
|
|
427
427
|
'.cumulus-standalone-root {',
|
|
428
428
|
' display: flex; flex-direction: row;',
|
|
429
|
-
' width: 100%; height: 100vh;',
|
|
429
|
+
' width: 100%; height: 100vh; height: 100dvh;',
|
|
430
430
|
' background: #1e1e1e; overflow: hidden;',
|
|
431
431
|
'}',
|
|
432
432
|
|
|
@@ -716,6 +716,95 @@
|
|
|
716
716
|
'.cumulus-overlay-empty {',
|
|
717
717
|
' color: #555; font-size: 0.9em; text-align: center; padding: 2em;',
|
|
718
718
|
'}',
|
|
719
|
+
|
|
720
|
+
/* ── Hamburger toggle (hidden on desktop) ── */
|
|
721
|
+
'.cumulus-sidebar-toggle {',
|
|
722
|
+
' display: none;',
|
|
723
|
+
' background: none; border: none; color: #ccc;',
|
|
724
|
+
' font-size: 22px; padding: 4px 8px; cursor: pointer; line-height: 1;',
|
|
725
|
+
'}',
|
|
726
|
+
'.cumulus-sidebar-toggle:hover { color: #fff; }',
|
|
727
|
+
|
|
728
|
+
/* ── Sidebar backdrop (mobile overlay) ── */
|
|
729
|
+
'.cumulus-sidebar-backdrop {',
|
|
730
|
+
' display: none;',
|
|
731
|
+
' position: fixed; top: 0; left: 0; right: 0; bottom: 0;',
|
|
732
|
+
' background: rgba(0,0,0,0.5); z-index: 99;',
|
|
733
|
+
'}',
|
|
734
|
+
|
|
735
|
+
/* ── Mobile responsive ── */
|
|
736
|
+
'@media (max-width: 768px) {',
|
|
737
|
+
|
|
738
|
+
/* Show hamburger */
|
|
739
|
+
' .cumulus-sidebar-toggle { display: flex; align-items: center; }',
|
|
740
|
+
|
|
741
|
+
/* Sidebar becomes a slide-over drawer */
|
|
742
|
+
' .cumulus-sidebar {',
|
|
743
|
+
' position: fixed; top: 0; left: 0; bottom: 0;',
|
|
744
|
+
' width: 280px; z-index: 100;',
|
|
745
|
+
' transform: translateX(-100%);',
|
|
746
|
+
' transition: transform 0.2s ease;',
|
|
747
|
+
' border-right: 1px solid #333;',
|
|
748
|
+
' }',
|
|
749
|
+
' .cumulus-sidebar.open {',
|
|
750
|
+
' transform: translateX(0);',
|
|
751
|
+
' }',
|
|
752
|
+
' .cumulus-sidebar-backdrop.open {',
|
|
753
|
+
' display: block;',
|
|
754
|
+
' }',
|
|
755
|
+
|
|
756
|
+
/* Bigger touch targets for thread items */
|
|
757
|
+
' .cumulus-thread-item {',
|
|
758
|
+
' padding: 12px 14px; font-size: 15px; min-height: 44px;',
|
|
759
|
+
' }',
|
|
760
|
+
' .cumulus-new-thread-btn { padding: 12px 10px; font-size: 15px; min-height: 44px; }',
|
|
761
|
+
' .cumulus-new-thread-input { padding: 12px 10px; font-size: 15px; min-height: 44px; }',
|
|
762
|
+
' .cumulus-sidebar-footer { padding: 10px; }',
|
|
763
|
+
|
|
764
|
+
/* Force single panel (no side-by-side) */
|
|
765
|
+
' .cumulus-content-area { flex-direction: column; }',
|
|
766
|
+
' .cumulus-thread-panel { border-left: none; border-top: 1px solid #333; }',
|
|
767
|
+
' .cumulus-thread-panel:first-child { border-top: none; }',
|
|
768
|
+
|
|
769
|
+
/* Full-width message content */
|
|
770
|
+
' .cumulus-msg-row { max-width: 100%; }',
|
|
771
|
+
' .cumulus-input-row { max-width: 100%; }',
|
|
772
|
+
' .cumulus-attach-strip { max-width: 100%; }',
|
|
773
|
+
|
|
774
|
+
/* Slightly larger base text for readability */
|
|
775
|
+
' .cumulus-messages { padding: 1em 0.65em; gap: 1.2em; }',
|
|
776
|
+
' .cumulus-input-area { padding: 0.5em 0.65em 0.6em; }',
|
|
777
|
+
|
|
778
|
+
/* User bubble can be wider on mobile */
|
|
779
|
+
' .cumulus-msg.user { max-width: 85%; }',
|
|
780
|
+
|
|
781
|
+
/* Tables scroll horizontally */
|
|
782
|
+
' .cumulus-msg table { display: block; overflow-x: auto; white-space: nowrap; }',
|
|
783
|
+
|
|
784
|
+
/* Code blocks: ensure horizontal scroll works */
|
|
785
|
+
' .code-block-wrapper pre { font-size: 0.85em; }',
|
|
786
|
+
|
|
787
|
+
/* Auth panel full-width */
|
|
788
|
+
' .cumulus-auth { padding: 2em 1.2em; }',
|
|
789
|
+
' .cumulus-auth-input { max-width: 100%; }',
|
|
790
|
+
|
|
791
|
+
/* Overlay footer inputs stack better */
|
|
792
|
+
' .cumulus-include-add-row { flex-wrap: wrap; }',
|
|
793
|
+
' .cumulus-include-add-input { min-width: 0; }',
|
|
794
|
+
|
|
795
|
+
/* Topbar: tighter on mobile */
|
|
796
|
+
' .cumulus-topbar { padding: 0 10px; }',
|
|
797
|
+
' .cumulus-topbar-title { font-size: 14px; }',
|
|
798
|
+
|
|
799
|
+
/* Panel header: allow wrapping of action buttons */
|
|
800
|
+
' .cumulus-panel-actions { gap: 2px; }',
|
|
801
|
+
' .cumulus-panel-action-btn { font-size: 10px; padding: 2px 5px; }',
|
|
802
|
+
|
|
803
|
+
/* Empty state hint: no cmd+click on mobile */
|
|
804
|
+
' .cumulus-standalone-empty-hint { display: none; }',
|
|
805
|
+
|
|
806
|
+
'}',
|
|
807
|
+
|
|
719
808
|
].join('\n');
|
|
720
809
|
|
|
721
810
|
// ─── HTML Escaping ───────────────────────────────────────────────────────────
|
|
@@ -1633,12 +1722,13 @@
|
|
|
1633
1722
|
|
|
1634
1723
|
// App layout — shown after auth
|
|
1635
1724
|
var appLayout = document.createElement('div');
|
|
1636
|
-
appLayout.style.cssText = 'display:none; flex-direction:column; width:100%; height:100vh; overflow:hidden;';
|
|
1725
|
+
appLayout.style.cssText = 'display:none; flex-direction:column; width:100%; height:100vh; height:100dvh; overflow:hidden;';
|
|
1637
1726
|
|
|
1638
1727
|
// Top bar
|
|
1639
1728
|
var topbar = document.createElement('div');
|
|
1640
1729
|
topbar.className = 'cumulus-topbar';
|
|
1641
1730
|
topbar.innerHTML =
|
|
1731
|
+
'<button class="cumulus-sidebar-toggle" data-testid="webchat-sidebar-toggle" aria-label="Toggle sidebar">☰</button>' +
|
|
1642
1732
|
'<span class="cumulus-topbar-title">Cumulus</span>' +
|
|
1643
1733
|
'<div class="cumulus-topbar-right">' +
|
|
1644
1734
|
'<span class="cumulus-header-status">' +
|
|
@@ -1692,10 +1782,38 @@
|
|
|
1692
1782
|
var contentArea = document.createElement('div');
|
|
1693
1783
|
contentArea.className = 'cumulus-content-area';
|
|
1694
1784
|
|
|
1785
|
+
// Sidebar backdrop (mobile overlay)
|
|
1786
|
+
var sidebarBackdrop = document.createElement('div');
|
|
1787
|
+
sidebarBackdrop.className = 'cumulus-sidebar-backdrop';
|
|
1788
|
+
sidebarBackdrop.setAttribute('data-testid', 'webchat-sidebar-backdrop');
|
|
1789
|
+
|
|
1790
|
+
appRow.appendChild(sidebarBackdrop);
|
|
1695
1791
|
appRow.appendChild(sidebar);
|
|
1696
1792
|
appRow.appendChild(contentArea);
|
|
1697
1793
|
appLayout.appendChild(appRow);
|
|
1698
1794
|
|
|
1795
|
+
// ── Mobile sidebar toggle ──
|
|
1796
|
+
var isMobile = function () { return window.innerWidth <= 768; };
|
|
1797
|
+
|
|
1798
|
+
function openSidebar() {
|
|
1799
|
+
sidebar.classList.add('open');
|
|
1800
|
+
sidebarBackdrop.classList.add('open');
|
|
1801
|
+
}
|
|
1802
|
+
function closeSidebar() {
|
|
1803
|
+
sidebar.classList.remove('open');
|
|
1804
|
+
sidebarBackdrop.classList.remove('open');
|
|
1805
|
+
}
|
|
1806
|
+
|
|
1807
|
+
sidebarBackdrop.addEventListener('click', closeSidebar);
|
|
1808
|
+
|
|
1809
|
+
var toggleBtn = topbar.querySelector('[data-testid="webchat-sidebar-toggle"]');
|
|
1810
|
+
if (toggleBtn) {
|
|
1811
|
+
toggleBtn.addEventListener('click', function () {
|
|
1812
|
+
if (sidebar.classList.contains('open')) closeSidebar();
|
|
1813
|
+
else openSidebar();
|
|
1814
|
+
});
|
|
1815
|
+
}
|
|
1816
|
+
|
|
1699
1817
|
standaloneRoot.appendChild(authWrapper);
|
|
1700
1818
|
standaloneRoot.appendChild(appLayout);
|
|
1701
1819
|
container.appendChild(standaloneRoot);
|
|
@@ -1842,9 +1960,15 @@
|
|
|
1842
1960
|
renderSidebar();
|
|
1843
1961
|
renderContentArea();
|
|
1844
1962
|
loadThreadHistoryIfNeeded(name);
|
|
1963
|
+
if (isMobile()) closeSidebar();
|
|
1845
1964
|
}
|
|
1846
1965
|
|
|
1847
1966
|
function togglePanelThread(name) {
|
|
1967
|
+
// On mobile, always solo (no side-by-side)
|
|
1968
|
+
if (isMobile()) {
|
|
1969
|
+
soloThread(name);
|
|
1970
|
+
return;
|
|
1971
|
+
}
|
|
1848
1972
|
var idx = visibleThreads.indexOf(name);
|
|
1849
1973
|
if (idx !== -1) {
|
|
1850
1974
|
// Remove from visible
|