@messenger-box/tailwind-ui-inbox 10.0.3-alpha.113 → 10.0.3-alpha.114
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.
- package/CHANGELOG.md +4 -0
- package/lib/container/InboxContainer.d.ts +1 -0
- package/lib/container/InboxContainer.d.ts.map +1 -1
- package/lib/container/InboxContainer.js +2 -1
- package/lib/container/InboxContainer.js.map +1 -1
- package/lib/container/InboxWithAiLoader.d.ts +1 -0
- package/lib/container/InboxWithAiLoader.d.ts.map +1 -1
- package/lib/container/InboxWithAiLoader.js +2 -1
- package/lib/container/InboxWithAiLoader.js.map +1 -1
- package/lib/module.js +7 -7
- package/lib/module.js.map +1 -1
- package/lib/templates/InboxWithAi.d.ts +1 -0
- package/lib/templates/InboxWithAi.d.ts.map +1 -1
- package/lib/templates/InboxWithAi.js +71 -19
- package/lib/templates/InboxWithAi.js.map +1 -1
- package/lib/templates/InboxWithAi.tsx +101 -33
- package/package.json +2 -2
- package/src/container/InboxContainer.tsx +9 -1
- package/src/container/InboxWithAiLoader.tsx +2 -0
- package/src/module.tsx +4 -4
- package/src/templates/InboxWithAi.tsx +101 -33
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,10 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [10.0.3-alpha.114](https://github.com/CDEBase/messenger-box/compare/v10.0.3-alpha.113...v10.0.3-alpha.114) (2025-10-24)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @messenger-box/tailwind-ui-inbox
|
|
9
|
+
|
|
6
10
|
## [10.0.3-alpha.113](https://github.com/CDEBase/messenger-box/compare/v10.0.3-alpha.112...v10.0.3-alpha.113) (2025-10-23)
|
|
7
11
|
|
|
8
12
|
**Note:** Version bump only for package @messenger-box/tailwind-ui-inbox
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InboxContainer.d.ts","sourceRoot":"","sources":["../../src/container/InboxContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+B,MAAM,OAAO,CAAC;AAGpD,UAAU,mBAAmB;IACzB,SAAS,EAAE,MAAM,CAAC;IAClB,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACrC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACtB;;
|
|
1
|
+
{"version":3,"file":"InboxContainer.d.ts","sourceRoot":"","sources":["../../src/container/InboxContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+B,MAAM,OAAO,CAAC;AAGpD,UAAU,mBAAmB;IACzB,SAAS,EAAE,MAAM,CAAC;IAClB,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACrC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,qBAAqB,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACpD,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACtB;;AA+BD,wBAA0C"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InboxContainer.js","sources":["../../src/container/InboxContainer.tsx"],"sourcesContent":[null],"names":["React"],"mappings":"
|
|
1
|
+
{"version":3,"file":"InboxContainer.js","sources":["../../src/container/InboxContainer.tsx"],"sourcesContent":[null],"names":["React"],"mappings":"iFAaA,MAAM,aAAa,GAAGA,cAAK,CAAC,IAAI,CAAC,CAAC;kBAK1B,GAAA;MACCA,cAAA,CAAA;AAIT,EAAA,SAAM,EAAA,oEAA0D;AAC5D,EAAA,KAAA,EAAA;IASA,MAAK,EAAA;AACD;iBACH,CAAA,aAAA,CAAA,KAAA,EAAA;AAED,EAAA,SAAO,EAAA;AACX,CAAC,CAAC,EAAA,gBAAA,IAAAA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAEF,EAAA,SAAA,EAAA;AAEA,CAAA,CAAA,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InboxWithAiLoader.d.ts","sourceRoot":"","sources":["../../src/container/InboxWithAiLoader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAiCvC,UAAU,sBAAsB;IAC5B,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACrC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACtB;;YAEiC,sBAAsB;;;
|
|
1
|
+
{"version":3,"file":"InboxWithAiLoader.d.ts","sourceRoot":"","sources":["../../src/container/InboxWithAiLoader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAiCvC,UAAU,sBAAsB;IAC5B,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACrC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,qBAAqB,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACpD,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACtB;;YAEiC,sBAAsB;;;AAkCxD,wBAA6C"}
|
|
@@ -34,7 +34,8 @@ const InboxWithAiLoader = props => {
|
|
|
34
34
|
const inboxProps = useMemo(() => ({
|
|
35
35
|
...props,
|
|
36
36
|
orgName: orgName || '',
|
|
37
|
-
pathPrefix: pathPrefix || ''
|
|
37
|
+
pathPrefix: pathPrefix || '',
|
|
38
|
+
handleRecreateSandbox: props.handleRecreateSandbox
|
|
38
39
|
}), [props, orgName, pathPrefix]);
|
|
39
40
|
const {
|
|
40
41
|
id: pathChannelId
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InboxWithAiLoader.js","sources":["../../src/container/InboxWithAiLoader.tsx"],"sourcesContent":[null],"names":["React"],"mappings":"gMAKA;AACwBA,cAAK,CAAC,IAAI,CAAC,MAAMA,cACrC,CAAA,aAAA,CAAA,KAAA,EAAA;AACI,EAAA,SAAA,EAAA;AAIR,CAAA,EAAAA,cAAM,CAAA,aAAA,CAAA,KAAsB,EAAA;AAEpB,EAAA,SAAA,EAAA;AAQR,CAAA,CAAA,CAAA;AAEQA,oBACa,MAACA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA;WAGV,EAAA;
|
|
1
|
+
{"version":3,"file":"InboxWithAiLoader.js","sources":["../../src/container/InboxWithAiLoader.tsx"],"sourcesContent":[null],"names":["React"],"mappings":"gMAKA;AACwBA,cAAK,CAAC,IAAI,CAAC,MAAMA,cACrC,CAAA,aAAA,CAAA,KAAA,EAAA;AACI,EAAA,SAAA,EAAA;AAIR,CAAA,EAAAA,cAAM,CAAA,aAAA,CAAA,KAAsB,EAAA;AAEpB,EAAA,SAAA,EAAA;AAQR,CAAA,CAAA,CAAA;AAEQA,oBACa,MAACA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA;WAGV,EAAA;AAeZ,CAAA,EAAAA,cAAM,CAAA,aAAA,CAAiB,KAAI,EAAA;WACjB;;AAEWA,cAAA,CAAA,IAAW,CAAA,CAAE;AAC9B,EAAA;MACAA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AACA,EAAA;AAEQ,CAAA,EAAAA,cAAA,CAAA,aAAQ,CAAA,KAAA,EAAA;WACR,EAAA,2FAAsB;QACtB;iBACA,CAAA,aAAA,CAAA,MAAqB,EAAE;WAE1B,EAAA;WAGC,CAAE,EAAE;MAEV,iBAAA,GAAA,KAAA,IAAA;QACA;IAEA,WAAA,EAAA,eAAA;IACA;WACI;QACH;IAED,OAAA;IAEA,WAAO,EAAA;AACX,GAAE,GAAA,SAAA,EAAA;AAEF,EAAA,MAAA,QAAA,GAAA,WAA6B,EAAA;AAC7B,EAAA,MAAA,SAAiB,GAAC,QAAA,EAAW,MAAG,GAAA,IAAA,eAAoB,CAAA,QAAA,CAAA,MAAA,CAAA,GAAA,IAAA;AAEpD;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/lib/module.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {Feature}from'@common-stack/client-react';import {typePolicies,schema,dataIdFromObject}from'@messenger-box/platform-client';import {MESSAGE_SLOT_FILL_NAME}from'@messenger-box/core';import {filteredRoutes}from'./compute.js';import {ChatMessageFill}from'./components/slot-fill/chat-message-filler.js';import
|
|
1
|
+
import {Feature}from'@common-stack/client-react';import {typePolicies,schema,dataIdFromObject}from'@messenger-box/platform-client';import {MESSAGE_SLOT_FILL_NAME}from'@messenger-box/core';import {filteredRoutes}from'./compute.js';import {ChatMessageFill}from'./components/slot-fill/chat-message-filler.js';import'react';import'@common-stack/components-pro';import'./enums/messenger-slot-fill-name-enum.js';import'./components/live-code-editor/hybrid-live-editor.js';import'common/graphql';var module = new Feature({
|
|
2
2
|
routeConfig: filteredRoutes,
|
|
3
3
|
dataIdFromObject,
|
|
4
4
|
clientStateParams: {
|
|
@@ -9,18 +9,18 @@ import {Feature}from'@common-stack/client-react';import {typePolicies,schema,dat
|
|
|
9
9
|
componentFillPlugins: [{
|
|
10
10
|
name: `${MESSAGE_SLOT_FILL_NAME}1`,
|
|
11
11
|
render: ChatMessageFill
|
|
12
|
-
}
|
|
12
|
+
}
|
|
13
13
|
// {
|
|
14
14
|
// name: `${MESSAGE_SLOT_FILL_NAME}2`,
|
|
15
15
|
// render: ChatMessageFill2,
|
|
16
16
|
// },
|
|
17
|
-
{
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
}
|
|
17
|
+
// {
|
|
18
|
+
// name: 'inbox-with-ai-right-sidebar-1',
|
|
19
|
+
// render: RightSidebarFill,
|
|
20
|
+
// },
|
|
21
21
|
// {
|
|
22
22
|
// name: 'inbox-with-ai-right-sidebar-2',
|
|
23
23
|
// render: RightSidebarFill2,
|
|
24
24
|
// },
|
|
25
25
|
]
|
|
26
|
-
});export{ChatMessageFill,
|
|
26
|
+
});export{ChatMessageFill,module as default};//# sourceMappingURL=module.js.map
|
package/lib/module.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"module.js","sources":["../src/module.tsx"],"sourcesContent":[null],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"module.js","sources":["../src/module.tsx"],"sourcesContent":[null],"names":[],"mappings":"yeAQA,aAAe,IAAI,OAAO,CAAC;AACvB,EAAA,WAAA,EAAW,cAAE;kBACb;AACA,EAAA,iBAAA,EAAiB;IACjB,QAAA,EAAA,MAAe;AACf,IAAA;AACI,GAAA;cACI,EAAI,CAAA,2DAA8B,CAAA;AAClC,EAAA,oBAAQ,EAAA,CAAA;AACX,IAAA,IAAA,EAAA,CAAA,EAAA,sBAAA,CAAA,CAAA,CAAA;UACD,EAAI;;;;;;;;;;;;AAYP;AACJ;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InboxWithAi.d.ts","sourceRoot":"","sources":["../../src/templates/InboxWithAi.tsx"],"names":[],"mappings":"AAAA,OAAO,KAUN,MAAM,OAAO,CAAC;AAiBf,MAAM,WAAW,UAAU;IACvB,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACzC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,GAAG,CAAC;IACX,OAAO,CAAC,EAAE,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"InboxWithAi.d.ts","sourceRoot":"","sources":["../../src/templates/InboxWithAi.tsx"],"names":[],"mappings":"AAAA,OAAO,KAUN,MAAM,OAAO,CAAC;AAiBf,MAAM,WAAW,UAAU;IACvB,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACzC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,GAAG,CAAC;IACX,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,qBAAqB,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;CACvD;;YA0D2B,UAAU;;;AAkhBtC,wBAAuC"}
|
|
@@ -81,28 +81,30 @@ const InboxWithAiInternal = props => {
|
|
|
81
81
|
const [isLoading, setIsLoading] = useState(true);
|
|
82
82
|
const [errorData, setError] = useState(null);
|
|
83
83
|
const [sendMessageInput, handleSendMessage] = useState(null);
|
|
84
|
+
const [isMinimized, setIsMinimized] = useState(false);
|
|
84
85
|
// Extract channelId from query parameters (priority) or path parameters (fallback)
|
|
85
86
|
const channelId = urlParams?.get('id') || pathChannelId;
|
|
86
87
|
const recreateSandboxForFragment = useCallback(async messageId => {
|
|
87
|
-
if (!channelId) {
|
|
88
|
-
console.error('No
|
|
88
|
+
if (!channelId || !messageId) {
|
|
89
|
+
console.error('No channel ID or message ID available for sandbox recreation');
|
|
89
90
|
return;
|
|
90
91
|
}
|
|
91
92
|
try {
|
|
92
93
|
setIsLoading(true);
|
|
93
94
|
setError(null);
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
}
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
95
|
+
props.handleRecreateSandbox?.(messageId);
|
|
96
|
+
// const response = await recreateSandbox({
|
|
97
|
+
// variables: {
|
|
98
|
+
// messageId,
|
|
99
|
+
// },
|
|
100
|
+
// });
|
|
101
|
+
// if (response.data?.recreateSandbox?.success) {
|
|
102
|
+
// console.log('Sandbox recreation initiated successfully');
|
|
103
|
+
// // The subscription will handle updating the UI with the new sandbox URL
|
|
104
|
+
// } else {
|
|
105
|
+
// const errorMsg = response.data?.recreateSandbox?.message || 'Failed to recreate sandbox';
|
|
106
|
+
// throw new Error(errorMsg);
|
|
107
|
+
// }
|
|
106
108
|
} catch (err) {
|
|
107
109
|
console.error('Error recreating sandbox:', err);
|
|
108
110
|
setError(err instanceof Error ? err.message : 'Failed to recreate sandbox');
|
|
@@ -115,6 +117,16 @@ const InboxWithAiInternal = props => {
|
|
|
115
117
|
recreateSandboxForFragment(selectedPost.id);
|
|
116
118
|
}
|
|
117
119
|
}, [activeTab, selectedPost, recreateSandboxForFragment]);
|
|
120
|
+
// Handle preview sandbox
|
|
121
|
+
const handlePreviewSandbox = useCallback(() => {
|
|
122
|
+
if (selectedPost?.propsConfiguration?.contents?.fragment?.sandboxUrl) {
|
|
123
|
+
const sandboxUrl = selectedPost.propsConfiguration.contents.fragment.sandboxUrl;
|
|
124
|
+
console.log('Opening sandbox URL:', sandboxUrl);
|
|
125
|
+
window.open(sandboxUrl, '_blank', 'noopener,noreferrer');
|
|
126
|
+
} else {
|
|
127
|
+
console.warn('No sandbox URL available for selected post');
|
|
128
|
+
}
|
|
129
|
+
}, [selectedPost]);
|
|
118
130
|
// Hooks - improved responsive breakpoints with better granularity
|
|
119
131
|
const {
|
|
120
132
|
width: windowWidth,
|
|
@@ -185,7 +197,42 @@ const InboxWithAiInternal = props => {
|
|
|
185
197
|
strokeLinejoin: "round",
|
|
186
198
|
strokeWidth: 2,
|
|
187
199
|
d: "M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"
|
|
188
|
-
})), React__default.createElement("span", null, "Code")))), isDesktopView && React__default.createElement("
|
|
200
|
+
})), React__default.createElement("span", null, "Code")))), isDesktopView && React__default.createElement("div", {
|
|
201
|
+
className: "flex items-center gap-2"
|
|
202
|
+
}, React__default.createElement("button", {
|
|
203
|
+
onClick: () => setIsMinimized(!isMinimized),
|
|
204
|
+
className: "p-2 text-gray-600 hover:text-gray-900 hover:bg-gray-50 rounded-lg transition-colors",
|
|
205
|
+
title: isMinimized ? 'Maximize Content' : 'Minimize Content'
|
|
206
|
+
}, React__default.createElement("svg", {
|
|
207
|
+
className: "w-4 h-4",
|
|
208
|
+
fill: "none",
|
|
209
|
+
stroke: "currentColor",
|
|
210
|
+
viewBox: "0 0 24 24"
|
|
211
|
+
}, isMinimized ? React__default.createElement("path", {
|
|
212
|
+
strokeLinecap: "round",
|
|
213
|
+
strokeLinejoin: "round",
|
|
214
|
+
strokeWidth: 2,
|
|
215
|
+
d: "M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4"
|
|
216
|
+
}) : React__default.createElement("path", {
|
|
217
|
+
strokeLinecap: "round",
|
|
218
|
+
strokeLinejoin: "round",
|
|
219
|
+
strokeWidth: 2,
|
|
220
|
+
d: "M9 9V4.5M9 9H4.5M9 9L3.5 3.5M15 9V4.5M15 9h4.5M15 9l5.5-5.5M9 15v4.5M9 15H4.5M9 15l-5.5 5.5M15 15v4.5M15 15h4.5M15 15l5.5 5.5"
|
|
221
|
+
}))), React__default.createElement("button", {
|
|
222
|
+
onClick: () => handlePreviewSandbox(),
|
|
223
|
+
className: "p-2 text-gray-600 hover:text-gray-900 hover:bg-gray-50 rounded-lg transition-colors",
|
|
224
|
+
title: "Open URL"
|
|
225
|
+
}, React__default.createElement("svg", {
|
|
226
|
+
className: "w-4 h-4",
|
|
227
|
+
fill: "none",
|
|
228
|
+
stroke: "currentColor",
|
|
229
|
+
viewBox: "0 0 24 24"
|
|
230
|
+
}, React__default.createElement("path", {
|
|
231
|
+
strokeLinecap: "round",
|
|
232
|
+
strokeLinejoin: "round",
|
|
233
|
+
strokeWidth: 2,
|
|
234
|
+
d: "M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"
|
|
235
|
+
}))), React__default.createElement("button", {
|
|
189
236
|
onClick: () => handleRefreshSandbox(),
|
|
190
237
|
className: "p-2 text-gray-600 hover:text-gray-900 hover:bg-gray-50 rounded-lg transition-colors",
|
|
191
238
|
title: "Refresh Sandbox"
|
|
@@ -199,7 +246,7 @@ const InboxWithAiInternal = props => {
|
|
|
199
246
|
strokeLinejoin: "round",
|
|
200
247
|
strokeWidth: 2,
|
|
201
248
|
d: "M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
|
|
202
|
-
}))))), React__default.createElement("div", {
|
|
249
|
+
})))))), React__default.createElement("div", {
|
|
203
250
|
className: "flex-1 grid overflow-hidden",
|
|
204
251
|
style: {
|
|
205
252
|
gridTemplateColumns: isDesktopView ? '35% 65%' : '1fr',
|
|
@@ -208,6 +255,7 @@ const InboxWithAiInternal = props => {
|
|
|
208
255
|
}, React__default.createElement("div", {
|
|
209
256
|
className: `
|
|
210
257
|
${isMobileView && !channelId ? 'hidden' : 'flex'}
|
|
258
|
+
${isMinimized && isDesktopView ? 'hidden' : 'flex'}
|
|
211
259
|
flex flex-col overflow-hidden transition-all duration-300 ease-in-out
|
|
212
260
|
`,
|
|
213
261
|
style: {
|
|
@@ -224,11 +272,12 @@ const InboxWithAiInternal = props => {
|
|
|
224
272
|
isLoading: isLoading,
|
|
225
273
|
sendMessageInput: sendMessageInput
|
|
226
274
|
}) : React__default.createElement(EmptyState, null)), channelId && isDesktopView && React__default.createElement("div", {
|
|
227
|
-
className: "overflow-hidden border",
|
|
275
|
+
className: "overflow-hidden border flex-1 w-full",
|
|
228
276
|
style: {
|
|
229
277
|
marginBottom: 10,
|
|
230
278
|
marginRight: 10,
|
|
231
|
-
borderRadius: 10
|
|
279
|
+
borderRadius: 10,
|
|
280
|
+
width: isMinimized ? windowWidth : `100%`
|
|
232
281
|
}
|
|
233
282
|
}, React__default.createElement(RightSidebarContent, {
|
|
234
283
|
detailSidebarOptions: detailSidebarOptions,
|
|
@@ -241,6 +290,7 @@ const InboxWithAiInternal = props => {
|
|
|
241
290
|
setIsLoading: setIsLoading,
|
|
242
291
|
isLoading: isLoading,
|
|
243
292
|
handleSendMessage: handleSendMessage,
|
|
293
|
+
isMinimized: isMinimized,
|
|
244
294
|
...props
|
|
245
295
|
})))));
|
|
246
296
|
};
|
|
@@ -404,15 +454,17 @@ const RightSidebarContent = React__default.memo(({
|
|
|
404
454
|
setIsLoading,
|
|
405
455
|
isLoading,
|
|
406
456
|
handleSendMessage,
|
|
457
|
+
isMinimized,
|
|
407
458
|
...props
|
|
408
459
|
}) => {
|
|
409
460
|
const {
|
|
410
461
|
activeTab
|
|
411
462
|
} = useContext(TabContext);
|
|
412
463
|
return React__default.createElement("div", {
|
|
413
|
-
className: "border-l border-gray-200 bg-white flex-shrink-0 overflow-hidden",
|
|
464
|
+
className: "border-l border-gray-200 bg-white flex-shrink-0 overflow-hidden flex-1 w-full",
|
|
414
465
|
style: {
|
|
415
466
|
// width: `${windowWidth * 0.35}px`, // 35% of window width
|
|
467
|
+
width: isMinimized ? windowWidth : `100%`,
|
|
416
468
|
height: `${windowHeight}px`,
|
|
417
469
|
maxHeight: '100vh'
|
|
418
470
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InboxWithAi.js","sources":["../../src/templates/InboxWithAi.tsx"],"sourcesContent":[null],"names":["React"],"mappings":"6WAkBA;AACA,MAAM,UAAU,GAAG,aAAa,CAG7B;AACC,EAAA,SAAA,EAAS,SAAE;AACX,EAAA,YAAA,EAAY,MAAK,CAAE;AACtB,CAAA,CAAC;
|
|
1
|
+
{"version":3,"file":"InboxWithAi.js","sources":["../../src/templates/InboxWithAi.tsx"],"sourcesContent":[null],"names":["React"],"mappings":"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"}
|
|
@@ -32,6 +32,7 @@ export interface InboxProps {
|
|
|
32
32
|
pathPrefix?: string;
|
|
33
33
|
data?: any;
|
|
34
34
|
orgName?: string;
|
|
35
|
+
handleRecreateSandbox?: (messageId: string) => void;
|
|
35
36
|
}
|
|
36
37
|
|
|
37
38
|
// Static utility hooks and components
|
|
@@ -113,13 +114,14 @@ const InboxWithAiInternal = (props: InboxProps) => {
|
|
|
113
114
|
const [isLoading, setIsLoading] = useState(true);
|
|
114
115
|
const [errorData, setError] = useState<string | null>(null);
|
|
115
116
|
const [sendMessageInput, handleSendMessage] = useState<ICreateChannelInput | null>(null);
|
|
117
|
+
const [isMinimized, setIsMinimized] = useState(false);
|
|
116
118
|
// Extract channelId from query parameters (priority) or path parameters (fallback)
|
|
117
119
|
const channelId = urlParams?.get('id') || pathChannelId;
|
|
118
120
|
|
|
119
121
|
const recreateSandboxForFragment = useCallback(
|
|
120
122
|
async (messageId: string) => {
|
|
121
|
-
if (!channelId) {
|
|
122
|
-
console.error('No
|
|
123
|
+
if (!channelId || !messageId) {
|
|
124
|
+
console.error('No channel ID or message ID available for sandbox recreation');
|
|
123
125
|
return;
|
|
124
126
|
}
|
|
125
127
|
|
|
@@ -127,19 +129,21 @@ const InboxWithAiInternal = (props: InboxProps) => {
|
|
|
127
129
|
setIsLoading(true);
|
|
128
130
|
setError(null);
|
|
129
131
|
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
132
|
+
props.handleRecreateSandbox?.(messageId);
|
|
133
|
+
|
|
134
|
+
// const response = await recreateSandbox({
|
|
135
|
+
// variables: {
|
|
136
|
+
// messageId,
|
|
137
|
+
// },
|
|
138
|
+
// });
|
|
139
|
+
|
|
140
|
+
// if (response.data?.recreateSandbox?.success) {
|
|
141
|
+
// console.log('Sandbox recreation initiated successfully');
|
|
142
|
+
// // The subscription will handle updating the UI with the new sandbox URL
|
|
143
|
+
// } else {
|
|
144
|
+
// const errorMsg = response.data?.recreateSandbox?.message || 'Failed to recreate sandbox';
|
|
145
|
+
// throw new Error(errorMsg);
|
|
146
|
+
// }
|
|
143
147
|
} catch (err) {
|
|
144
148
|
console.error('Error recreating sandbox:', err);
|
|
145
149
|
setError(err instanceof Error ? err.message : 'Failed to recreate sandbox');
|
|
@@ -156,6 +160,17 @@ const InboxWithAiInternal = (props: InboxProps) => {
|
|
|
156
160
|
}
|
|
157
161
|
}, [activeTab, selectedPost, recreateSandboxForFragment]);
|
|
158
162
|
|
|
163
|
+
// Handle preview sandbox
|
|
164
|
+
const handlePreviewSandbox = useCallback(() => {
|
|
165
|
+
if (selectedPost?.propsConfiguration?.contents?.fragment?.sandboxUrl) {
|
|
166
|
+
const sandboxUrl = selectedPost.propsConfiguration.contents.fragment.sandboxUrl;
|
|
167
|
+
console.log('Opening sandbox URL:', sandboxUrl);
|
|
168
|
+
window.open(sandboxUrl, '_blank', 'noopener,noreferrer');
|
|
169
|
+
} else {
|
|
170
|
+
console.warn('No sandbox URL available for selected post');
|
|
171
|
+
}
|
|
172
|
+
}, [selectedPost]);
|
|
173
|
+
|
|
159
174
|
// Hooks - improved responsive breakpoints with better granularity
|
|
160
175
|
const { width: windowWidth, height: windowHeight } = useWindowDimensions();
|
|
161
176
|
const isMobileView = useMediaQuery('(max-width: 640px)');
|
|
@@ -248,22 +263,66 @@ const InboxWithAiInternal = (props: InboxProps) => {
|
|
|
248
263
|
)}
|
|
249
264
|
</div>
|
|
250
265
|
|
|
251
|
-
{/*
|
|
266
|
+
{/* Action buttons on the right - hidden on mobile */}
|
|
252
267
|
{isDesktopView && (
|
|
253
|
-
<
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
268
|
+
<div className="flex items-center gap-2">
|
|
269
|
+
{/* Minimize/Maximize button */}
|
|
270
|
+
<button
|
|
271
|
+
onClick={() => setIsMinimized(!isMinimized)}
|
|
272
|
+
className="p-2 text-gray-600 hover:text-gray-900 hover:bg-gray-50 rounded-lg transition-colors"
|
|
273
|
+
title={isMinimized ? 'Maximize Content' : 'Minimize Content'}
|
|
274
|
+
>
|
|
275
|
+
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
276
|
+
{isMinimized ? (
|
|
277
|
+
<path
|
|
278
|
+
strokeLinecap="round"
|
|
279
|
+
strokeLinejoin="round"
|
|
280
|
+
strokeWidth={2}
|
|
281
|
+
d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4"
|
|
282
|
+
/>
|
|
283
|
+
) : (
|
|
284
|
+
<path
|
|
285
|
+
strokeLinecap="round"
|
|
286
|
+
strokeLinejoin="round"
|
|
287
|
+
strokeWidth={2}
|
|
288
|
+
d="M9 9V4.5M9 9H4.5M9 9L3.5 3.5M15 9V4.5M15 9h4.5M15 9l5.5-5.5M9 15v4.5M9 15H4.5M9 15l-5.5 5.5M15 15v4.5M15 15h4.5M15 15l5.5 5.5"
|
|
289
|
+
/>
|
|
290
|
+
)}
|
|
291
|
+
</svg>
|
|
292
|
+
</button>
|
|
293
|
+
|
|
294
|
+
{/* Preview button */}
|
|
295
|
+
<button
|
|
296
|
+
onClick={() => handlePreviewSandbox()}
|
|
297
|
+
className="p-2 text-gray-600 hover:text-gray-900 hover:bg-gray-50 rounded-lg transition-colors"
|
|
298
|
+
title="Open URL"
|
|
299
|
+
>
|
|
300
|
+
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
301
|
+
<path
|
|
302
|
+
strokeLinecap="round"
|
|
303
|
+
strokeLinejoin="round"
|
|
304
|
+
strokeWidth={2}
|
|
305
|
+
d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"
|
|
306
|
+
/>
|
|
307
|
+
</svg>
|
|
308
|
+
</button>
|
|
309
|
+
|
|
310
|
+
{/* Refresh button */}
|
|
311
|
+
<button
|
|
312
|
+
onClick={() => handleRefreshSandbox()}
|
|
313
|
+
className="p-2 text-gray-600 hover:text-gray-900 hover:bg-gray-50 rounded-lg transition-colors"
|
|
314
|
+
title="Refresh Sandbox"
|
|
315
|
+
>
|
|
316
|
+
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
317
|
+
<path
|
|
318
|
+
strokeLinecap="round"
|
|
319
|
+
strokeLinejoin="round"
|
|
320
|
+
strokeWidth={2}
|
|
321
|
+
d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
|
|
322
|
+
/>
|
|
323
|
+
</svg>
|
|
324
|
+
</button>
|
|
325
|
+
</div>
|
|
267
326
|
)}
|
|
268
327
|
</div>
|
|
269
328
|
</div>
|
|
@@ -281,6 +340,7 @@ const InboxWithAiInternal = (props: InboxProps) => {
|
|
|
281
340
|
<div
|
|
282
341
|
className={`
|
|
283
342
|
${isMobileView && !channelId ? 'hidden' : 'flex'}
|
|
343
|
+
${isMinimized && isDesktopView ? 'hidden' : 'flex'}
|
|
284
344
|
flex flex-col overflow-hidden transition-all duration-300 ease-in-out
|
|
285
345
|
`}
|
|
286
346
|
style={{ paddingTop: '15px' }}
|
|
@@ -305,8 +365,13 @@ const InboxWithAiInternal = (props: InboxProps) => {
|
|
|
305
365
|
{/* Right Sidebar - 65% width on desktop only */}
|
|
306
366
|
{channelId && isDesktopView && (
|
|
307
367
|
<div
|
|
308
|
-
className="overflow-hidden border"
|
|
309
|
-
style={{
|
|
368
|
+
className="overflow-hidden border flex-1 w-full"
|
|
369
|
+
style={{
|
|
370
|
+
marginBottom: 10,
|
|
371
|
+
marginRight: 10,
|
|
372
|
+
borderRadius: 10,
|
|
373
|
+
width: isMinimized ? windowWidth : `100%`,
|
|
374
|
+
}}
|
|
310
375
|
>
|
|
311
376
|
<RightSidebarContent
|
|
312
377
|
detailSidebarOptions={detailSidebarOptions}
|
|
@@ -319,6 +384,7 @@ const InboxWithAiInternal = (props: InboxProps) => {
|
|
|
319
384
|
setIsLoading={setIsLoading}
|
|
320
385
|
isLoading={isLoading}
|
|
321
386
|
handleSendMessage={handleSendMessage}
|
|
387
|
+
isMinimized={isMinimized}
|
|
322
388
|
{...props}
|
|
323
389
|
/>
|
|
324
390
|
</div>
|
|
@@ -512,15 +578,17 @@ const RightSidebarContent = React.memo(
|
|
|
512
578
|
setIsLoading,
|
|
513
579
|
isLoading,
|
|
514
580
|
handleSendMessage,
|
|
581
|
+
isMinimized,
|
|
515
582
|
...props
|
|
516
583
|
}: any) => {
|
|
517
584
|
const { activeTab } = useContext(TabContext);
|
|
518
585
|
|
|
519
586
|
return (
|
|
520
587
|
<div
|
|
521
|
-
className="border-l border-gray-200 bg-white flex-shrink-0 overflow-hidden"
|
|
588
|
+
className="border-l border-gray-200 bg-white flex-shrink-0 overflow-hidden flex-1 w-full"
|
|
522
589
|
style={{
|
|
523
590
|
// width: `${windowWidth * 0.35}px`, // 35% of window width
|
|
591
|
+
width: isMinimized ? windowWidth : `100%`,
|
|
524
592
|
height: `${windowHeight}px`,
|
|
525
593
|
maxHeight: '100vh',
|
|
526
594
|
}}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@messenger-box/tailwind-ui-inbox",
|
|
3
|
-
"version": "10.0.3-alpha.
|
|
3
|
+
"version": "10.0.3-alpha.114",
|
|
4
4
|
"description": "Inbox UI components built with TailwindCSS",
|
|
5
5
|
"license": "ISC",
|
|
6
6
|
"author": "CDMBase LLC",
|
|
@@ -58,5 +58,5 @@
|
|
|
58
58
|
"typescript": {
|
|
59
59
|
"definition": "lib/index.d.ts"
|
|
60
60
|
},
|
|
61
|
-
"gitHead": "
|
|
61
|
+
"gitHead": "99cf0e6fa7be13bc4d1b1cf50af5e94c6891ec43"
|
|
62
62
|
}
|
|
@@ -7,6 +7,7 @@ interface InboxContainerProps {
|
|
|
7
7
|
channelRole?: string;
|
|
8
8
|
supportServices?: boolean;
|
|
9
9
|
orgName?: string;
|
|
10
|
+
handleRecreateSandbox?: (messageId: string) => void;
|
|
10
11
|
[key: string]: any;
|
|
11
12
|
}
|
|
12
13
|
|
|
@@ -21,7 +22,14 @@ const InboxSkeleton = React.memo(({ showRightSidebar = false }: { showRightSideb
|
|
|
21
22
|
));
|
|
22
23
|
|
|
23
24
|
const InboxContainer: React.FC<InboxContainerProps> = (props) => {
|
|
24
|
-
const {
|
|
25
|
+
const {
|
|
26
|
+
channelId,
|
|
27
|
+
channelFilters: channelFilterProp,
|
|
28
|
+
channelRole,
|
|
29
|
+
supportServices,
|
|
30
|
+
orgName,
|
|
31
|
+
handleRecreateSandbox,
|
|
32
|
+
} = props;
|
|
25
33
|
|
|
26
34
|
if (!channelId) {
|
|
27
35
|
return <InboxSkeleton showRightSidebar={true} />;
|
|
@@ -37,6 +37,7 @@ interface InboxWithAiLoaderProps {
|
|
|
37
37
|
supportServices?: boolean;
|
|
38
38
|
pathPrefix?: string;
|
|
39
39
|
orgName?: string;
|
|
40
|
+
handleRecreateSandbox?: (messageId: string) => void;
|
|
40
41
|
[key: string]: any;
|
|
41
42
|
}
|
|
42
43
|
|
|
@@ -51,6 +52,7 @@ const InboxWithAiLoader = (props: InboxWithAiLoaderProps) => {
|
|
|
51
52
|
...props,
|
|
52
53
|
orgName: orgName || '',
|
|
53
54
|
pathPrefix: pathPrefix || '',
|
|
55
|
+
handleRecreateSandbox: props.handleRecreateSandbox,
|
|
54
56
|
}),
|
|
55
57
|
[props, orgName, pathPrefix],
|
|
56
58
|
);
|
package/src/module.tsx
CHANGED
|
@@ -20,10 +20,10 @@ export default new Feature({
|
|
|
20
20
|
// name: `${MESSAGE_SLOT_FILL_NAME}2`,
|
|
21
21
|
// render: ChatMessageFill2,
|
|
22
22
|
// },
|
|
23
|
-
{
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
},
|
|
23
|
+
// {
|
|
24
|
+
// name: 'inbox-with-ai-right-sidebar-1',
|
|
25
|
+
// render: RightSidebarFill,
|
|
26
|
+
// },
|
|
27
27
|
// {
|
|
28
28
|
// name: 'inbox-with-ai-right-sidebar-2',
|
|
29
29
|
// render: RightSidebarFill2,
|
|
@@ -32,6 +32,7 @@ export interface InboxProps {
|
|
|
32
32
|
pathPrefix?: string;
|
|
33
33
|
data?: any;
|
|
34
34
|
orgName?: string;
|
|
35
|
+
handleRecreateSandbox?: (messageId: string) => void;
|
|
35
36
|
}
|
|
36
37
|
|
|
37
38
|
// Static utility hooks and components
|
|
@@ -113,13 +114,14 @@ const InboxWithAiInternal = (props: InboxProps) => {
|
|
|
113
114
|
const [isLoading, setIsLoading] = useState(true);
|
|
114
115
|
const [errorData, setError] = useState<string | null>(null);
|
|
115
116
|
const [sendMessageInput, handleSendMessage] = useState<ICreateChannelInput | null>(null);
|
|
117
|
+
const [isMinimized, setIsMinimized] = useState(false);
|
|
116
118
|
// Extract channelId from query parameters (priority) or path parameters (fallback)
|
|
117
119
|
const channelId = urlParams?.get('id') || pathChannelId;
|
|
118
120
|
|
|
119
121
|
const recreateSandboxForFragment = useCallback(
|
|
120
122
|
async (messageId: string) => {
|
|
121
|
-
if (!channelId) {
|
|
122
|
-
console.error('No
|
|
123
|
+
if (!channelId || !messageId) {
|
|
124
|
+
console.error('No channel ID or message ID available for sandbox recreation');
|
|
123
125
|
return;
|
|
124
126
|
}
|
|
125
127
|
|
|
@@ -127,19 +129,21 @@ const InboxWithAiInternal = (props: InboxProps) => {
|
|
|
127
129
|
setIsLoading(true);
|
|
128
130
|
setError(null);
|
|
129
131
|
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
132
|
+
props.handleRecreateSandbox?.(messageId);
|
|
133
|
+
|
|
134
|
+
// const response = await recreateSandbox({
|
|
135
|
+
// variables: {
|
|
136
|
+
// messageId,
|
|
137
|
+
// },
|
|
138
|
+
// });
|
|
139
|
+
|
|
140
|
+
// if (response.data?.recreateSandbox?.success) {
|
|
141
|
+
// console.log('Sandbox recreation initiated successfully');
|
|
142
|
+
// // The subscription will handle updating the UI with the new sandbox URL
|
|
143
|
+
// } else {
|
|
144
|
+
// const errorMsg = response.data?.recreateSandbox?.message || 'Failed to recreate sandbox';
|
|
145
|
+
// throw new Error(errorMsg);
|
|
146
|
+
// }
|
|
143
147
|
} catch (err) {
|
|
144
148
|
console.error('Error recreating sandbox:', err);
|
|
145
149
|
setError(err instanceof Error ? err.message : 'Failed to recreate sandbox');
|
|
@@ -156,6 +160,17 @@ const InboxWithAiInternal = (props: InboxProps) => {
|
|
|
156
160
|
}
|
|
157
161
|
}, [activeTab, selectedPost, recreateSandboxForFragment]);
|
|
158
162
|
|
|
163
|
+
// Handle preview sandbox
|
|
164
|
+
const handlePreviewSandbox = useCallback(() => {
|
|
165
|
+
if (selectedPost?.propsConfiguration?.contents?.fragment?.sandboxUrl) {
|
|
166
|
+
const sandboxUrl = selectedPost.propsConfiguration.contents.fragment.sandboxUrl;
|
|
167
|
+
console.log('Opening sandbox URL:', sandboxUrl);
|
|
168
|
+
window.open(sandboxUrl, '_blank', 'noopener,noreferrer');
|
|
169
|
+
} else {
|
|
170
|
+
console.warn('No sandbox URL available for selected post');
|
|
171
|
+
}
|
|
172
|
+
}, [selectedPost]);
|
|
173
|
+
|
|
159
174
|
// Hooks - improved responsive breakpoints with better granularity
|
|
160
175
|
const { width: windowWidth, height: windowHeight } = useWindowDimensions();
|
|
161
176
|
const isMobileView = useMediaQuery('(max-width: 640px)');
|
|
@@ -248,22 +263,66 @@ const InboxWithAiInternal = (props: InboxProps) => {
|
|
|
248
263
|
)}
|
|
249
264
|
</div>
|
|
250
265
|
|
|
251
|
-
{/*
|
|
266
|
+
{/* Action buttons on the right - hidden on mobile */}
|
|
252
267
|
{isDesktopView && (
|
|
253
|
-
<
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
268
|
+
<div className="flex items-center gap-2">
|
|
269
|
+
{/* Minimize/Maximize button */}
|
|
270
|
+
<button
|
|
271
|
+
onClick={() => setIsMinimized(!isMinimized)}
|
|
272
|
+
className="p-2 text-gray-600 hover:text-gray-900 hover:bg-gray-50 rounded-lg transition-colors"
|
|
273
|
+
title={isMinimized ? 'Maximize Content' : 'Minimize Content'}
|
|
274
|
+
>
|
|
275
|
+
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
276
|
+
{isMinimized ? (
|
|
277
|
+
<path
|
|
278
|
+
strokeLinecap="round"
|
|
279
|
+
strokeLinejoin="round"
|
|
280
|
+
strokeWidth={2}
|
|
281
|
+
d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4"
|
|
282
|
+
/>
|
|
283
|
+
) : (
|
|
284
|
+
<path
|
|
285
|
+
strokeLinecap="round"
|
|
286
|
+
strokeLinejoin="round"
|
|
287
|
+
strokeWidth={2}
|
|
288
|
+
d="M9 9V4.5M9 9H4.5M9 9L3.5 3.5M15 9V4.5M15 9h4.5M15 9l5.5-5.5M9 15v4.5M9 15H4.5M9 15l-5.5 5.5M15 15v4.5M15 15h4.5M15 15l5.5 5.5"
|
|
289
|
+
/>
|
|
290
|
+
)}
|
|
291
|
+
</svg>
|
|
292
|
+
</button>
|
|
293
|
+
|
|
294
|
+
{/* Preview button */}
|
|
295
|
+
<button
|
|
296
|
+
onClick={() => handlePreviewSandbox()}
|
|
297
|
+
className="p-2 text-gray-600 hover:text-gray-900 hover:bg-gray-50 rounded-lg transition-colors"
|
|
298
|
+
title="Open URL"
|
|
299
|
+
>
|
|
300
|
+
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
301
|
+
<path
|
|
302
|
+
strokeLinecap="round"
|
|
303
|
+
strokeLinejoin="round"
|
|
304
|
+
strokeWidth={2}
|
|
305
|
+
d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"
|
|
306
|
+
/>
|
|
307
|
+
</svg>
|
|
308
|
+
</button>
|
|
309
|
+
|
|
310
|
+
{/* Refresh button */}
|
|
311
|
+
<button
|
|
312
|
+
onClick={() => handleRefreshSandbox()}
|
|
313
|
+
className="p-2 text-gray-600 hover:text-gray-900 hover:bg-gray-50 rounded-lg transition-colors"
|
|
314
|
+
title="Refresh Sandbox"
|
|
315
|
+
>
|
|
316
|
+
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
317
|
+
<path
|
|
318
|
+
strokeLinecap="round"
|
|
319
|
+
strokeLinejoin="round"
|
|
320
|
+
strokeWidth={2}
|
|
321
|
+
d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
|
|
322
|
+
/>
|
|
323
|
+
</svg>
|
|
324
|
+
</button>
|
|
325
|
+
</div>
|
|
267
326
|
)}
|
|
268
327
|
</div>
|
|
269
328
|
</div>
|
|
@@ -281,6 +340,7 @@ const InboxWithAiInternal = (props: InboxProps) => {
|
|
|
281
340
|
<div
|
|
282
341
|
className={`
|
|
283
342
|
${isMobileView && !channelId ? 'hidden' : 'flex'}
|
|
343
|
+
${isMinimized && isDesktopView ? 'hidden' : 'flex'}
|
|
284
344
|
flex flex-col overflow-hidden transition-all duration-300 ease-in-out
|
|
285
345
|
`}
|
|
286
346
|
style={{ paddingTop: '15px' }}
|
|
@@ -305,8 +365,13 @@ const InboxWithAiInternal = (props: InboxProps) => {
|
|
|
305
365
|
{/* Right Sidebar - 65% width on desktop only */}
|
|
306
366
|
{channelId && isDesktopView && (
|
|
307
367
|
<div
|
|
308
|
-
className="overflow-hidden border"
|
|
309
|
-
style={{
|
|
368
|
+
className="overflow-hidden border flex-1 w-full"
|
|
369
|
+
style={{
|
|
370
|
+
marginBottom: 10,
|
|
371
|
+
marginRight: 10,
|
|
372
|
+
borderRadius: 10,
|
|
373
|
+
width: isMinimized ? windowWidth : `100%`,
|
|
374
|
+
}}
|
|
310
375
|
>
|
|
311
376
|
<RightSidebarContent
|
|
312
377
|
detailSidebarOptions={detailSidebarOptions}
|
|
@@ -319,6 +384,7 @@ const InboxWithAiInternal = (props: InboxProps) => {
|
|
|
319
384
|
setIsLoading={setIsLoading}
|
|
320
385
|
isLoading={isLoading}
|
|
321
386
|
handleSendMessage={handleSendMessage}
|
|
387
|
+
isMinimized={isMinimized}
|
|
322
388
|
{...props}
|
|
323
389
|
/>
|
|
324
390
|
</div>
|
|
@@ -512,15 +578,17 @@ const RightSidebarContent = React.memo(
|
|
|
512
578
|
setIsLoading,
|
|
513
579
|
isLoading,
|
|
514
580
|
handleSendMessage,
|
|
581
|
+
isMinimized,
|
|
515
582
|
...props
|
|
516
583
|
}: any) => {
|
|
517
584
|
const { activeTab } = useContext(TabContext);
|
|
518
585
|
|
|
519
586
|
return (
|
|
520
587
|
<div
|
|
521
|
-
className="border-l border-gray-200 bg-white flex-shrink-0 overflow-hidden"
|
|
588
|
+
className="border-l border-gray-200 bg-white flex-shrink-0 overflow-hidden flex-1 w-full"
|
|
522
589
|
style={{
|
|
523
590
|
// width: `${windowWidth * 0.35}px`, // 35% of window width
|
|
591
|
+
width: isMinimized ? windowWidth : `100%`,
|
|
524
592
|
height: `${windowHeight}px`,
|
|
525
593
|
maxHeight: '100vh',
|
|
526
594
|
}}
|