@copilotz/chat-ui 0.6.5 → 0.6.7
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/dist/index.cjs +497 -372
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +41 -24
- package/dist/index.d.ts +41 -24
- package/dist/index.js +409 -270
- package/dist/index.js.map +1 -1
- package/dist/styles.css +6 -0
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -40,7 +40,7 @@ __export(index_exports, {
|
|
|
40
40
|
module.exports = __toCommonJS(index_exports);
|
|
41
41
|
|
|
42
42
|
// src/components/chat/ChatUI.tsx
|
|
43
|
-
var
|
|
43
|
+
var import_react10 = require("react");
|
|
44
44
|
var import_react_virtual = require("@tanstack/react-virtual");
|
|
45
45
|
|
|
46
46
|
// src/config/chatConfig.ts
|
|
@@ -1165,7 +1165,7 @@ var Message = (0, import_react2.memo)(({
|
|
|
1165
1165
|
}, arePropsEqual);
|
|
1166
1166
|
|
|
1167
1167
|
// src/components/chat/Sidebar.tsx
|
|
1168
|
-
var
|
|
1168
|
+
var import_react4 = require("react");
|
|
1169
1169
|
|
|
1170
1170
|
// src/components/ui/input.tsx
|
|
1171
1171
|
var import_jsx_runtime9 = require("react/jsx-runtime");
|
|
@@ -2194,6 +2194,7 @@ function DropdownMenuSeparator({
|
|
|
2194
2194
|
var import_lucide_react8 = require("lucide-react");
|
|
2195
2195
|
|
|
2196
2196
|
// src/components/chat/UserMenu.tsx
|
|
2197
|
+
var import_react3 = __toESM(require("react"), 1);
|
|
2197
2198
|
var import_lucide_react7 = require("lucide-react");
|
|
2198
2199
|
var import_jsx_runtime17 = require("react/jsx-runtime");
|
|
2199
2200
|
var getInitials = (name, email) => {
|
|
@@ -2215,6 +2216,7 @@ var UserMenu = ({
|
|
|
2215
2216
|
callbacks,
|
|
2216
2217
|
currentTheme = "system",
|
|
2217
2218
|
showThemeOptions = true,
|
|
2219
|
+
sections = [],
|
|
2218
2220
|
additionalItems
|
|
2219
2221
|
}) => {
|
|
2220
2222
|
const { isMobile } = useSidebar();
|
|
@@ -2278,6 +2280,27 @@ var UserMenu = ({
|
|
|
2278
2280
|
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { children: labels.settings })
|
|
2279
2281
|
] }),
|
|
2280
2282
|
additionalItems,
|
|
2283
|
+
sections.map((section) => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_react3.default.Fragment, { children: [
|
|
2284
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(DropdownMenuSeparator, {}),
|
|
2285
|
+
section.label && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(DropdownMenuLabel, { className: "px-2 py-2", children: section.label }),
|
|
2286
|
+
section.items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
|
|
2287
|
+
DropdownMenuItem,
|
|
2288
|
+
{
|
|
2289
|
+
onClick: item.onSelect,
|
|
2290
|
+
disabled: item.disabled,
|
|
2291
|
+
className: [
|
|
2292
|
+
item.checked ? "bg-accent/60" : "",
|
|
2293
|
+
item.variant === "destructive" ? "text-destructive focus:text-destructive focus:bg-destructive/10" : ""
|
|
2294
|
+
].filter(Boolean).join(" "),
|
|
2295
|
+
children: [
|
|
2296
|
+
item.icon && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "mr-2 h-4 w-4 shrink-0", children: item.icon }),
|
|
2297
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "flex-1", children: item.label }),
|
|
2298
|
+
item.checked && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react7.Check, { className: "ml-2 h-4 w-4 text-primary" })
|
|
2299
|
+
]
|
|
2300
|
+
},
|
|
2301
|
+
item.id
|
|
2302
|
+
))
|
|
2303
|
+
] }, section.id)),
|
|
2281
2304
|
showThemeOptions && callbacks?.onThemeChange && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
|
|
2282
2305
|
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(DropdownMenuSeparator, {}),
|
|
2283
2306
|
/* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
|
|
@@ -2337,8 +2360,8 @@ var UserMenu = ({
|
|
|
2337
2360
|
// src/components/chat/Sidebar.tsx
|
|
2338
2361
|
var import_jsx_runtime18 = require("react/jsx-runtime");
|
|
2339
2362
|
var CreateThreadDialog = ({ config, onCreateThread, trigger }) => {
|
|
2340
|
-
const [title, setTitle] = (0,
|
|
2341
|
-
const [isOpen, setIsOpen] = (0,
|
|
2363
|
+
const [title, setTitle] = (0, import_react4.useState)("");
|
|
2364
|
+
const [isOpen, setIsOpen] = (0, import_react4.useState)(false);
|
|
2342
2365
|
const handleCreate = () => {
|
|
2343
2366
|
onCreateThread(title.trim() || void 0);
|
|
2344
2367
|
setTitle("");
|
|
@@ -2389,17 +2412,18 @@ var Sidebar2 = ({
|
|
|
2389
2412
|
userMenuCallbacks,
|
|
2390
2413
|
currentTheme,
|
|
2391
2414
|
showThemeOptions = true,
|
|
2415
|
+
userMenuSections,
|
|
2392
2416
|
userMenuAdditionalItems,
|
|
2393
2417
|
...props
|
|
2394
2418
|
}) => {
|
|
2395
|
-
const [searchQuery, setSearchQuery] = (0,
|
|
2396
|
-
const [showArchived, setShowArchived] = (0,
|
|
2397
|
-
const [deleteThreadId, setDeleteThreadId] = (0,
|
|
2398
|
-
const [editingThreadId, setEditingThreadId] = (0,
|
|
2399
|
-
const [editTitle, setEditTitle] = (0,
|
|
2400
|
-
const inputRef = (0,
|
|
2419
|
+
const [searchQuery, setSearchQuery] = (0, import_react4.useState)("");
|
|
2420
|
+
const [showArchived, setShowArchived] = (0, import_react4.useState)(false);
|
|
2421
|
+
const [deleteThreadId, setDeleteThreadId] = (0, import_react4.useState)(null);
|
|
2422
|
+
const [editingThreadId, setEditingThreadId] = (0, import_react4.useState)(null);
|
|
2423
|
+
const [editTitle, setEditTitle] = (0, import_react4.useState)("");
|
|
2424
|
+
const inputRef = (0, import_react4.useRef)(null);
|
|
2401
2425
|
const { setOpen } = useSidebar();
|
|
2402
|
-
(0,
|
|
2426
|
+
(0, import_react4.useEffect)(() => {
|
|
2403
2427
|
if (editingThreadId && inputRef.current) {
|
|
2404
2428
|
inputRef.current.focus();
|
|
2405
2429
|
inputRef.current.select();
|
|
@@ -2407,7 +2431,9 @@ var Sidebar2 = ({
|
|
|
2407
2431
|
}, [editingThreadId]);
|
|
2408
2432
|
const filteredThreads = threads.filter((thread) => {
|
|
2409
2433
|
const title = (thread.title ?? "").toString();
|
|
2410
|
-
const matchesSearch = title.toLowerCase().includes(
|
|
2434
|
+
const matchesSearch = title.toLowerCase().includes(
|
|
2435
|
+
searchQuery.toLowerCase()
|
|
2436
|
+
);
|
|
2411
2437
|
const matchesArchiveFilter = showArchived || !thread.isArchived;
|
|
2412
2438
|
return matchesSearch && matchesArchiveFilter;
|
|
2413
2439
|
});
|
|
@@ -2531,8 +2557,12 @@ var Sidebar2 = ({
|
|
|
2531
2557
|
value: editTitle,
|
|
2532
2558
|
onChange: (e) => setEditTitle(e.target.value),
|
|
2533
2559
|
onKeyDown: (e) => {
|
|
2534
|
-
if (e.key === "Enter")
|
|
2535
|
-
|
|
2560
|
+
if (e.key === "Enter") {
|
|
2561
|
+
saveEdit();
|
|
2562
|
+
}
|
|
2563
|
+
if (e.key === "Escape") {
|
|
2564
|
+
cancelEdit();
|
|
2565
|
+
}
|
|
2536
2566
|
},
|
|
2537
2567
|
onBlur: saveEdit,
|
|
2538
2568
|
className: "h-7 text-sm"
|
|
@@ -2555,28 +2585,48 @@ var Sidebar2 = ({
|
|
|
2555
2585
|
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react8.MoreHorizontal, {}),
|
|
2556
2586
|
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "sr-only", children: "More" })
|
|
2557
2587
|
] }) }),
|
|
2558
|
-
/* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
|
|
2559
|
-
|
|
2560
|
-
|
|
2561
|
-
|
|
2562
|
-
|
|
2563
|
-
|
|
2564
|
-
|
|
2565
|
-
|
|
2566
|
-
|
|
2567
|
-
|
|
2568
|
-
|
|
2569
|
-
|
|
2570
|
-
|
|
2571
|
-
|
|
2572
|
-
|
|
2573
|
-
|
|
2574
|
-
|
|
2575
|
-
|
|
2576
|
-
|
|
2577
|
-
|
|
2578
|
-
|
|
2579
|
-
|
|
2588
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
|
|
2589
|
+
DropdownMenuContent,
|
|
2590
|
+
{
|
|
2591
|
+
className: "w-48",
|
|
2592
|
+
side: "right",
|
|
2593
|
+
align: "start",
|
|
2594
|
+
children: [
|
|
2595
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
|
|
2596
|
+
DropdownMenuItem,
|
|
2597
|
+
{
|
|
2598
|
+
onClick: () => startEditing(thread),
|
|
2599
|
+
children: [
|
|
2600
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react8.Edit2, { className: "mr-2 h-4 w-4" }),
|
|
2601
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { children: config.labels?.renameThread || "Rename" })
|
|
2602
|
+
]
|
|
2603
|
+
}
|
|
2604
|
+
),
|
|
2605
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
|
|
2606
|
+
DropdownMenuItem,
|
|
2607
|
+
{
|
|
2608
|
+
onClick: () => onArchiveThread?.(thread.id),
|
|
2609
|
+
children: [
|
|
2610
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react8.Archive, { className: "mr-2 h-4 w-4" }),
|
|
2611
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { children: thread.isArchived ? config.labels?.unarchiveThread || "Unarchive" : config.labels?.archiveThread || "Archive" })
|
|
2612
|
+
]
|
|
2613
|
+
}
|
|
2614
|
+
),
|
|
2615
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(DropdownMenuSeparator, {}),
|
|
2616
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
|
|
2617
|
+
DropdownMenuItem,
|
|
2618
|
+
{
|
|
2619
|
+
onClick: () => setDeleteThreadId(thread.id),
|
|
2620
|
+
className: "text-destructive focus:text-destructive",
|
|
2621
|
+
children: [
|
|
2622
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react8.Trash2, { className: "mr-2 h-4 w-4" }),
|
|
2623
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { children: config.labels?.deleteThread || "Delete" })
|
|
2624
|
+
]
|
|
2625
|
+
}
|
|
2626
|
+
)
|
|
2627
|
+
]
|
|
2628
|
+
}
|
|
2629
|
+
)
|
|
2580
2630
|
] })
|
|
2581
2631
|
] }, thread.id)) }) })
|
|
2582
2632
|
] }, group))
|
|
@@ -2589,39 +2639,47 @@ var Sidebar2 = ({
|
|
|
2589
2639
|
callbacks: userMenuCallbacks,
|
|
2590
2640
|
currentTheme,
|
|
2591
2641
|
showThemeOptions,
|
|
2642
|
+
sections: userMenuSections,
|
|
2592
2643
|
additionalItems: userMenuAdditionalItems
|
|
2593
2644
|
}
|
|
2594
2645
|
) }),
|
|
2595
2646
|
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(SidebarRail, {}),
|
|
2596
|
-
deleteThreadId && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
2597
|
-
|
|
2598
|
-
|
|
2599
|
-
|
|
2600
|
-
|
|
2601
|
-
|
|
2602
|
-
|
|
2603
|
-
|
|
2604
|
-
|
|
2605
|
-
|
|
2606
|
-
|
|
2607
|
-
|
|
2608
|
-
|
|
2609
|
-
|
|
2610
|
-
|
|
2611
|
-
|
|
2612
|
-
|
|
2647
|
+
deleteThreadId && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
2648
|
+
AlertDialog,
|
|
2649
|
+
{
|
|
2650
|
+
open: !!deleteThreadId,
|
|
2651
|
+
onOpenChange: () => setDeleteThreadId(null),
|
|
2652
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(AlertDialogContent, { children: [
|
|
2653
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(AlertDialogHeader, { children: [
|
|
2654
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(AlertDialogTitle, { children: config.labels?.deleteConfirmTitle || "Delete Conversation" }),
|
|
2655
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(AlertDialogDescription, { children: config.labels?.deleteConfirmDescription || "Are you sure you want to delete this conversation? This action cannot be undone." })
|
|
2656
|
+
] }),
|
|
2657
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(AlertDialogFooter, { children: [
|
|
2658
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(AlertDialogCancel, { children: config.labels?.cancel || "Cancel" }),
|
|
2659
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
2660
|
+
AlertDialogAction,
|
|
2661
|
+
{
|
|
2662
|
+
onClick: () => deleteThreadId && handleDeleteThread(deleteThreadId),
|
|
2663
|
+
className: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
|
|
2664
|
+
children: config.labels?.deleteThread || "Delete"
|
|
2665
|
+
}
|
|
2666
|
+
)
|
|
2667
|
+
] })
|
|
2668
|
+
] })
|
|
2669
|
+
}
|
|
2670
|
+
)
|
|
2613
2671
|
] });
|
|
2614
2672
|
};
|
|
2615
2673
|
|
|
2616
2674
|
// src/components/chat/ChatHeader.tsx
|
|
2617
|
-
var
|
|
2675
|
+
var import_react6 = __toESM(require("react"), 1);
|
|
2618
2676
|
var import_lucide_react10 = require("lucide-react");
|
|
2619
2677
|
|
|
2620
2678
|
// src/components/chat/AgentSelectors.tsx
|
|
2621
|
-
var
|
|
2679
|
+
var import_react5 = require("react");
|
|
2622
2680
|
var import_lucide_react9 = require("lucide-react");
|
|
2623
2681
|
var import_jsx_runtime19 = require("react/jsx-runtime");
|
|
2624
|
-
var ParticipantsSelector = (0,
|
|
2682
|
+
var ParticipantsSelector = (0, import_react5.memo)(({
|
|
2625
2683
|
agents,
|
|
2626
2684
|
participantIds,
|
|
2627
2685
|
onParticipantsChange,
|
|
@@ -2629,8 +2687,8 @@ var ParticipantsSelector = (0, import_react4.memo)(({
|
|
|
2629
2687
|
maxVisible = 3,
|
|
2630
2688
|
disabled = false
|
|
2631
2689
|
}) => {
|
|
2632
|
-
const agentsWithColors = (0,
|
|
2633
|
-
const selectedAgents = (0,
|
|
2690
|
+
const agentsWithColors = (0, import_react5.useMemo)(() => assignAgentColors(agents), [agents]);
|
|
2691
|
+
const selectedAgents = (0, import_react5.useMemo)(
|
|
2634
2692
|
() => agentsWithColors.filter((a) => participantIds.includes(a.id)),
|
|
2635
2693
|
[agentsWithColors, participantIds]
|
|
2636
2694
|
);
|
|
@@ -2719,7 +2777,7 @@ var ParticipantsSelector = (0, import_react4.memo)(({
|
|
|
2719
2777
|
] });
|
|
2720
2778
|
});
|
|
2721
2779
|
ParticipantsSelector.displayName = "ParticipantsSelector";
|
|
2722
|
-
var TargetAgentSelector = (0,
|
|
2780
|
+
var TargetAgentSelector = (0, import_react5.memo)(({
|
|
2723
2781
|
agents,
|
|
2724
2782
|
targetAgentId,
|
|
2725
2783
|
onTargetChange,
|
|
@@ -2727,8 +2785,8 @@ var TargetAgentSelector = (0, import_react4.memo)(({
|
|
|
2727
2785
|
placeholder = "Select agent",
|
|
2728
2786
|
disabled = false
|
|
2729
2787
|
}) => {
|
|
2730
|
-
const agentsWithColors = (0,
|
|
2731
|
-
const selectedAgent = (0,
|
|
2788
|
+
const agentsWithColors = (0, import_react5.useMemo)(() => assignAgentColors(agents), [agents]);
|
|
2789
|
+
const selectedAgent = (0, import_react5.useMemo)(
|
|
2732
2790
|
() => agentsWithColors.find((a) => a.id === targetAgentId),
|
|
2733
2791
|
[agentsWithColors, targetAgentId]
|
|
2734
2792
|
);
|
|
@@ -2797,7 +2855,7 @@ var TargetAgentSelector = (0, import_react4.memo)(({
|
|
|
2797
2855
|
] });
|
|
2798
2856
|
});
|
|
2799
2857
|
TargetAgentSelector.displayName = "TargetAgentSelector";
|
|
2800
|
-
var AgentBadge = (0,
|
|
2858
|
+
var AgentBadge = (0, import_react5.memo)(({
|
|
2801
2859
|
agent,
|
|
2802
2860
|
onRemove,
|
|
2803
2861
|
showRemove = false,
|
|
@@ -2866,11 +2924,11 @@ var ChatHeader = ({
|
|
|
2866
2924
|
onParticipantsChange,
|
|
2867
2925
|
className = ""
|
|
2868
2926
|
}) => {
|
|
2869
|
-
const [isDarkMode, setIsDarkMode] =
|
|
2927
|
+
const [isDarkMode, setIsDarkMode] = import_react6.default.useState(() => {
|
|
2870
2928
|
if (typeof window === "undefined") return false;
|
|
2871
2929
|
return document.documentElement.classList.contains("dark");
|
|
2872
2930
|
});
|
|
2873
|
-
|
|
2931
|
+
import_react6.default.useEffect(() => {
|
|
2874
2932
|
const observer = new MutationObserver(() => {
|
|
2875
2933
|
setIsDarkMode(document.documentElement.classList.contains("dark"));
|
|
2876
2934
|
});
|
|
@@ -3044,18 +3102,18 @@ var ChatHeader = ({
|
|
|
3044
3102
|
};
|
|
3045
3103
|
|
|
3046
3104
|
// src/components/chat/ChatInput.tsx
|
|
3047
|
-
var
|
|
3105
|
+
var import_react8 = __toESM(require("react"), 1);
|
|
3048
3106
|
|
|
3049
3107
|
// src/components/chat/UserContext.tsx
|
|
3050
|
-
var
|
|
3108
|
+
var import_react7 = require("react");
|
|
3051
3109
|
var import_jsx_runtime21 = require("react/jsx-runtime");
|
|
3052
|
-
var Ctx = (0,
|
|
3110
|
+
var Ctx = (0, import_react7.createContext)(void 0);
|
|
3053
3111
|
var ChatUserContextProvider = ({ children, initial }) => {
|
|
3054
|
-
const [ctx, setCtx] = (0,
|
|
3112
|
+
const [ctx, setCtx] = (0, import_react7.useState)(() => ({
|
|
3055
3113
|
updatedAt: Date.now(),
|
|
3056
3114
|
...initial ?? {}
|
|
3057
3115
|
}));
|
|
3058
|
-
(0,
|
|
3116
|
+
(0, import_react7.useEffect)(() => {
|
|
3059
3117
|
if (!initial) return;
|
|
3060
3118
|
setCtx((prev) => {
|
|
3061
3119
|
const keys = Object.keys(initial);
|
|
@@ -3064,13 +3122,13 @@ var ChatUserContextProvider = ({ children, initial }) => {
|
|
|
3064
3122
|
return { ...prev, ...initial, updatedAt: Date.now() };
|
|
3065
3123
|
});
|
|
3066
3124
|
}, [initial]);
|
|
3067
|
-
const setPartial = (0,
|
|
3125
|
+
const setPartial = (0, import_react7.useCallback)((next) => {
|
|
3068
3126
|
setCtx((prev) => {
|
|
3069
3127
|
const partial = typeof next === "function" ? next(prev) : next;
|
|
3070
3128
|
return { ...prev, ...partial, updatedAt: Date.now() };
|
|
3071
3129
|
});
|
|
3072
3130
|
}, []);
|
|
3073
|
-
const value = (0,
|
|
3131
|
+
const value = (0, import_react7.useMemo)(() => ({
|
|
3074
3132
|
context: ctx,
|
|
3075
3133
|
setContext: setPartial,
|
|
3076
3134
|
resetContext: () => setCtx({ updatedAt: Date.now() })
|
|
@@ -3078,7 +3136,7 @@ var ChatUserContextProvider = ({ children, initial }) => {
|
|
|
3078
3136
|
return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Ctx.Provider, { value, children });
|
|
3079
3137
|
};
|
|
3080
3138
|
function useChatUserContext() {
|
|
3081
|
-
const v = (0,
|
|
3139
|
+
const v = (0, import_react7.useContext)(Ctx);
|
|
3082
3140
|
if (!v) throw new Error("useChatUserContext must be used within ChatUserContextProvider");
|
|
3083
3141
|
return v;
|
|
3084
3142
|
}
|
|
@@ -3662,7 +3720,7 @@ function resolveTargetFromMentions(value, agents) {
|
|
|
3662
3720
|
}
|
|
3663
3721
|
return null;
|
|
3664
3722
|
}
|
|
3665
|
-
var FileUploadItem = (0,
|
|
3723
|
+
var FileUploadItem = (0, import_react8.memo)(function FileUploadItem2({ file, progress, onCancel }) {
|
|
3666
3724
|
const guessTypeFromName = (name) => {
|
|
3667
3725
|
const ext = (name || "").split(".").pop()?.toLowerCase();
|
|
3668
3726
|
switch (ext) {
|
|
@@ -3721,11 +3779,11 @@ var FileUploadItem = (0, import_react7.memo)(function FileUploadItem2({ file, pr
|
|
|
3721
3779
|
)
|
|
3722
3780
|
] }) }) });
|
|
3723
3781
|
});
|
|
3724
|
-
var AttachmentPreview = (0,
|
|
3725
|
-
const [isPlaying, setIsPlaying] = (0,
|
|
3726
|
-
const [audioPlaybackSrc, setAudioPlaybackSrc] = (0,
|
|
3727
|
-
const audioRef = (0,
|
|
3728
|
-
(0,
|
|
3782
|
+
var AttachmentPreview = (0, import_react8.memo)(function AttachmentPreview2({ attachment, onRemove }) {
|
|
3783
|
+
const [isPlaying, setIsPlaying] = (0, import_react8.useState)(false);
|
|
3784
|
+
const [audioPlaybackSrc, setAudioPlaybackSrc] = (0, import_react8.useState)(attachment.dataUrl);
|
|
3785
|
+
const audioRef = (0, import_react8.useRef)(null);
|
|
3786
|
+
(0, import_react8.useEffect)(() => {
|
|
3729
3787
|
if (attachment.kind !== "audio" || !attachment.dataUrl.startsWith("data:")) {
|
|
3730
3788
|
setAudioPlaybackSrc(attachment.dataUrl);
|
|
3731
3789
|
return;
|
|
@@ -3850,7 +3908,7 @@ var resolveVoiceErrorMessage = (error, config) => {
|
|
|
3850
3908
|
};
|
|
3851
3909
|
var clearVoiceTranscript = () => ({});
|
|
3852
3910
|
var resolveVoiceSegmentDuration = (segment) => segment.attachment.durationMs ?? 0;
|
|
3853
|
-
var ChatInput = (0,
|
|
3911
|
+
var ChatInput = (0, import_react8.memo)(function ChatInput2({
|
|
3854
3912
|
value,
|
|
3855
3913
|
onChange,
|
|
3856
3914
|
onSubmit,
|
|
@@ -3879,27 +3937,27 @@ var ChatInput = (0, import_react7.memo)(function ChatInput2({
|
|
|
3879
3937
|
const voiceTranscriptMode = config?.voiceCompose?.transcriptMode ?? "final-only";
|
|
3880
3938
|
const voiceMaxRecordingMs = config?.voiceCompose?.maxRecordingMs;
|
|
3881
3939
|
const { setContext } = useChatUserContext();
|
|
3882
|
-
const [uploadProgress, setUploadProgress] = (0,
|
|
3883
|
-
const [isVoiceComposerOpen, setIsVoiceComposerOpen] = (0,
|
|
3940
|
+
const [uploadProgress, setUploadProgress] = (0, import_react8.useState)(/* @__PURE__ */ new Map());
|
|
3941
|
+
const [isVoiceComposerOpen, setIsVoiceComposerOpen] = (0, import_react8.useState)(
|
|
3884
3942
|
() => enableAudioRecording && voiceDefaultMode === "voice"
|
|
3885
3943
|
);
|
|
3886
|
-
const [voiceState, setVoiceState] = (0,
|
|
3887
|
-
const [voiceDraft, setVoiceDraft] = (0,
|
|
3888
|
-
const [voiceTranscript, setVoiceTranscript] = (0,
|
|
3889
|
-
const [voiceDurationMs, setVoiceDurationMs] = (0,
|
|
3890
|
-
const [voiceAudioLevel, setVoiceAudioLevel] = (0,
|
|
3891
|
-
const [voiceCountdownMs, setVoiceCountdownMs] = (0,
|
|
3892
|
-
const [isVoiceAutoSendActive, setIsVoiceAutoSendActive] = (0,
|
|
3893
|
-
const [voiceError, setVoiceError] = (0,
|
|
3894
|
-
const [activeMention, setActiveMention] = (0,
|
|
3895
|
-
const [activeMentionIndex, setActiveMentionIndex] = (0,
|
|
3896
|
-
const textareaRef = (0,
|
|
3897
|
-
const fileInputRef = (0,
|
|
3898
|
-
const voiceProviderRef = (0,
|
|
3899
|
-
const voiceDraftRef = (0,
|
|
3900
|
-
const voiceAppendBaseRef = (0,
|
|
3901
|
-
const voiceAppendBaseDurationRef = (0,
|
|
3902
|
-
const filteredMentionAgents =
|
|
3944
|
+
const [voiceState, setVoiceState] = (0, import_react8.useState)("idle");
|
|
3945
|
+
const [voiceDraft, setVoiceDraft] = (0, import_react8.useState)(null);
|
|
3946
|
+
const [voiceTranscript, setVoiceTranscript] = (0, import_react8.useState)(clearVoiceTranscript);
|
|
3947
|
+
const [voiceDurationMs, setVoiceDurationMs] = (0, import_react8.useState)(0);
|
|
3948
|
+
const [voiceAudioLevel, setVoiceAudioLevel] = (0, import_react8.useState)(0);
|
|
3949
|
+
const [voiceCountdownMs, setVoiceCountdownMs] = (0, import_react8.useState)(0);
|
|
3950
|
+
const [isVoiceAutoSendActive, setIsVoiceAutoSendActive] = (0, import_react8.useState)(false);
|
|
3951
|
+
const [voiceError, setVoiceError] = (0, import_react8.useState)(null);
|
|
3952
|
+
const [activeMention, setActiveMention] = (0, import_react8.useState)(null);
|
|
3953
|
+
const [activeMentionIndex, setActiveMentionIndex] = (0, import_react8.useState)(0);
|
|
3954
|
+
const textareaRef = (0, import_react8.useRef)(null);
|
|
3955
|
+
const fileInputRef = (0, import_react8.useRef)(null);
|
|
3956
|
+
const voiceProviderRef = (0, import_react8.useRef)(null);
|
|
3957
|
+
const voiceDraftRef = (0, import_react8.useRef)(null);
|
|
3958
|
+
const voiceAppendBaseRef = (0, import_react8.useRef)(null);
|
|
3959
|
+
const voiceAppendBaseDurationRef = (0, import_react8.useRef)(0);
|
|
3960
|
+
const filteredMentionAgents = import_react8.default.useMemo(() => {
|
|
3903
3961
|
if (!activeMention || mentionAgents.length === 0) return [];
|
|
3904
3962
|
const query = activeMention.query.trim().toLowerCase();
|
|
3905
3963
|
const rank = (agent) => {
|
|
@@ -3917,7 +3975,7 @@ var ChatInput = (0, import_react7.memo)(function ChatInput2({
|
|
|
3917
3975
|
}).slice(0, 6);
|
|
3918
3976
|
}, [activeMention, mentionAgents]);
|
|
3919
3977
|
const isMentionMenuOpen = filteredMentionAgents.length > 0;
|
|
3920
|
-
const syncMentionState = (0,
|
|
3978
|
+
const syncMentionState = (0, import_react8.useCallback)((nextValue, nextCaret) => {
|
|
3921
3979
|
const caret = typeof nextCaret === "number" ? nextCaret : textareaRef.current?.selectionStart ?? nextValue.length;
|
|
3922
3980
|
const nextMatch = getActiveMentionMatch(nextValue, caret);
|
|
3923
3981
|
setActiveMention((prev) => {
|
|
@@ -3928,7 +3986,7 @@ var ChatInput = (0, import_react7.memo)(function ChatInput2({
|
|
|
3928
3986
|
});
|
|
3929
3987
|
setActiveMentionIndex(0);
|
|
3930
3988
|
}, []);
|
|
3931
|
-
(0,
|
|
3989
|
+
(0, import_react8.useEffect)(() => {
|
|
3932
3990
|
return () => {
|
|
3933
3991
|
if (voiceProviderRef.current) {
|
|
3934
3992
|
void voiceProviderRef.current.destroy();
|
|
@@ -3936,10 +3994,10 @@ var ChatInput = (0, import_react7.memo)(function ChatInput2({
|
|
|
3936
3994
|
}
|
|
3937
3995
|
};
|
|
3938
3996
|
}, []);
|
|
3939
|
-
(0,
|
|
3997
|
+
(0, import_react8.useEffect)(() => {
|
|
3940
3998
|
voiceDraftRef.current = voiceDraft;
|
|
3941
3999
|
}, [voiceDraft]);
|
|
3942
|
-
(0,
|
|
4000
|
+
(0, import_react8.useEffect)(() => {
|
|
3943
4001
|
if (!isMentionMenuOpen) {
|
|
3944
4002
|
setActiveMentionIndex(0);
|
|
3945
4003
|
return;
|
|
@@ -3948,7 +4006,7 @@ var ChatInput = (0, import_react7.memo)(function ChatInput2({
|
|
|
3948
4006
|
(prev) => prev >= filteredMentionAgents.length ? 0 : prev
|
|
3949
4007
|
);
|
|
3950
4008
|
}, [filteredMentionAgents.length, isMentionMenuOpen]);
|
|
3951
|
-
const selectMentionAgent = (0,
|
|
4009
|
+
const selectMentionAgent = (0, import_react8.useCallback)((agent) => {
|
|
3952
4010
|
if (!activeMention) return;
|
|
3953
4011
|
const replacement = `@${agent.name} `;
|
|
3954
4012
|
const nextValue = value.slice(0, activeMention.start) + replacement + value.slice(activeMention.end);
|
|
@@ -4086,7 +4144,7 @@ var ChatInput = (0, import_react7.memo)(function ChatInput2({
|
|
|
4086
4144
|
}
|
|
4087
4145
|
e.target.value = "";
|
|
4088
4146
|
};
|
|
4089
|
-
const handleDrop = (0,
|
|
4147
|
+
const handleDrop = (0, import_react8.useCallback)(async (e) => {
|
|
4090
4148
|
e.preventDefault();
|
|
4091
4149
|
if (!enableFileUpload) return;
|
|
4092
4150
|
const files = Array.from(e.dataTransfer.files);
|
|
@@ -4099,10 +4157,10 @@ var ChatInput = (0, import_react7.memo)(function ChatInput2({
|
|
|
4099
4157
|
}
|
|
4100
4158
|
}
|
|
4101
4159
|
}, [attachments, enableFileUpload, maxAttachments, onAttachmentsChange]);
|
|
4102
|
-
const handleDragOver = (0,
|
|
4160
|
+
const handleDragOver = (0, import_react8.useCallback)((e) => {
|
|
4103
4161
|
e.preventDefault();
|
|
4104
4162
|
}, []);
|
|
4105
|
-
const resetVoiceComposerState = (0,
|
|
4163
|
+
const resetVoiceComposerState = (0, import_react8.useCallback)((nextState = "idle") => {
|
|
4106
4164
|
setVoiceState(nextState);
|
|
4107
4165
|
setVoiceDraft(null);
|
|
4108
4166
|
voiceDraftRef.current = null;
|
|
@@ -4115,11 +4173,11 @@ var ChatInput = (0, import_react7.memo)(function ChatInput2({
|
|
|
4115
4173
|
setIsVoiceAutoSendActive(false);
|
|
4116
4174
|
setVoiceError(null);
|
|
4117
4175
|
}, []);
|
|
4118
|
-
const armVoiceDraftForAppend = (0,
|
|
4176
|
+
const armVoiceDraftForAppend = (0, import_react8.useCallback)((segment) => {
|
|
4119
4177
|
voiceAppendBaseRef.current = segment;
|
|
4120
4178
|
voiceAppendBaseDurationRef.current = segment ? resolveVoiceSegmentDuration(segment) : 0;
|
|
4121
4179
|
}, []);
|
|
4122
|
-
const handleVoiceProviderStateChange = (0,
|
|
4180
|
+
const handleVoiceProviderStateChange = (0, import_react8.useCallback)((nextState) => {
|
|
4123
4181
|
if (voiceReviewMode === "armed" && (nextState === "waiting_for_speech" || nextState === "listening")) {
|
|
4124
4182
|
const currentDraft = voiceDraftRef.current;
|
|
4125
4183
|
if (currentDraft) {
|
|
@@ -4132,7 +4190,7 @@ var ChatInput = (0, import_react7.memo)(function ChatInput2({
|
|
|
4132
4190
|
}
|
|
4133
4191
|
setVoiceState(nextState);
|
|
4134
4192
|
}, [armVoiceDraftForAppend, voiceAutoSendDelayMs, voiceReviewMode]);
|
|
4135
|
-
const ensureVoiceProvider = (0,
|
|
4193
|
+
const ensureVoiceProvider = (0, import_react8.useCallback)(async () => {
|
|
4136
4194
|
if (voiceProviderRef.current) {
|
|
4137
4195
|
return voiceProviderRef.current;
|
|
4138
4196
|
}
|
|
@@ -4219,7 +4277,7 @@ var ChatInput = (0, import_react7.memo)(function ChatInput2({
|
|
|
4219
4277
|
voiceProviderRef.current = provider;
|
|
4220
4278
|
return provider;
|
|
4221
4279
|
}, [armVoiceDraftForAppend, config, handleVoiceProviderStateChange, voiceAutoSendDelayMs, voiceMaxRecordingMs, voiceReviewMode]);
|
|
4222
|
-
const closeVoiceComposer = (0,
|
|
4280
|
+
const closeVoiceComposer = (0, import_react8.useCallback)(async () => {
|
|
4223
4281
|
voiceAppendBaseRef.current = null;
|
|
4224
4282
|
voiceAppendBaseDurationRef.current = 0;
|
|
4225
4283
|
setIsVoiceComposerOpen(false);
|
|
@@ -4235,7 +4293,7 @@ var ChatInput = (0, import_react7.memo)(function ChatInput2({
|
|
|
4235
4293
|
await voiceProviderRef.current.cancel();
|
|
4236
4294
|
}
|
|
4237
4295
|
}, []);
|
|
4238
|
-
const startVoiceCapture = (0,
|
|
4296
|
+
const startVoiceCapture = (0, import_react8.useCallback)(async (appendToDraft = false) => {
|
|
4239
4297
|
if (disabled || isGenerating) {
|
|
4240
4298
|
return;
|
|
4241
4299
|
}
|
|
@@ -4284,7 +4342,7 @@ var ChatInput = (0, import_react7.memo)(function ChatInput2({
|
|
|
4284
4342
|
setVoiceState("error");
|
|
4285
4343
|
}
|
|
4286
4344
|
}, [disabled, isGenerating, ensureVoiceProvider, config]);
|
|
4287
|
-
const stopVoiceCapture = (0,
|
|
4345
|
+
const stopVoiceCapture = (0, import_react8.useCallback)(async () => {
|
|
4288
4346
|
if (!voiceProviderRef.current) return;
|
|
4289
4347
|
try {
|
|
4290
4348
|
await voiceProviderRef.current.stop();
|
|
@@ -4293,7 +4351,7 @@ var ChatInput = (0, import_react7.memo)(function ChatInput2({
|
|
|
4293
4351
|
setVoiceState("error");
|
|
4294
4352
|
}
|
|
4295
4353
|
}, [config]);
|
|
4296
|
-
const cancelVoiceCapture = (0,
|
|
4354
|
+
const cancelVoiceCapture = (0, import_react8.useCallback)(async () => {
|
|
4297
4355
|
voiceAppendBaseRef.current = null;
|
|
4298
4356
|
voiceAppendBaseDurationRef.current = 0;
|
|
4299
4357
|
if (voiceProviderRef.current) {
|
|
@@ -4301,7 +4359,7 @@ var ChatInput = (0, import_react7.memo)(function ChatInput2({
|
|
|
4301
4359
|
}
|
|
4302
4360
|
resetVoiceComposerState("idle");
|
|
4303
4361
|
}, [resetVoiceComposerState]);
|
|
4304
|
-
const finalizeVoiceComposerAfterSend = (0,
|
|
4362
|
+
const finalizeVoiceComposerAfterSend = (0, import_react8.useCallback)(() => {
|
|
4305
4363
|
if (voicePersistComposer) {
|
|
4306
4364
|
resetVoiceComposerState("idle");
|
|
4307
4365
|
setIsVoiceComposerOpen(true);
|
|
@@ -4309,7 +4367,7 @@ var ChatInput = (0, import_react7.memo)(function ChatInput2({
|
|
|
4309
4367
|
}
|
|
4310
4368
|
void closeVoiceComposer();
|
|
4311
4369
|
}, [voicePersistComposer, resetVoiceComposerState, closeVoiceComposer]);
|
|
4312
|
-
const sendVoiceDraft = (0,
|
|
4370
|
+
const sendVoiceDraft = (0, import_react8.useCallback)(() => {
|
|
4313
4371
|
void (async () => {
|
|
4314
4372
|
if (!voiceDraft || disabled || isGenerating) {
|
|
4315
4373
|
return;
|
|
@@ -4335,7 +4393,7 @@ var ChatInput = (0, import_react7.memo)(function ChatInput2({
|
|
|
4335
4393
|
onAttachmentsChange,
|
|
4336
4394
|
finalizeVoiceComposerAfterSend
|
|
4337
4395
|
]);
|
|
4338
|
-
const cancelVoiceAutoSend = (0,
|
|
4396
|
+
const cancelVoiceAutoSend = (0, import_react8.useCallback)(() => {
|
|
4339
4397
|
void (async () => {
|
|
4340
4398
|
if (voiceReviewMode === "armed" && voiceProviderRef.current) {
|
|
4341
4399
|
await voiceProviderRef.current.cancel();
|
|
@@ -4347,7 +4405,7 @@ var ChatInput = (0, import_react7.memo)(function ChatInput2({
|
|
|
4347
4405
|
setVoiceCountdownMs(0);
|
|
4348
4406
|
setIsVoiceAutoSendActive(false);
|
|
4349
4407
|
}, [armVoiceDraftForAppend, voiceReviewMode]);
|
|
4350
|
-
const pauseVoiceReview = (0,
|
|
4408
|
+
const pauseVoiceReview = (0, import_react8.useCallback)(async () => {
|
|
4351
4409
|
if (voiceState === "listening") {
|
|
4352
4410
|
await stopVoiceCapture();
|
|
4353
4411
|
return;
|
|
@@ -4359,7 +4417,7 @@ var ChatInput = (0, import_react7.memo)(function ChatInput2({
|
|
|
4359
4417
|
setVoiceAudioLevel(0);
|
|
4360
4418
|
setVoiceState("review");
|
|
4361
4419
|
}, [armVoiceDraftForAppend, stopVoiceCapture, voiceReviewMode, voiceState]);
|
|
4362
|
-
(0,
|
|
4420
|
+
(0, import_react8.useEffect)(() => {
|
|
4363
4421
|
if (!voiceDraft || voiceAutoSendDelayMs <= 0 || !isVoiceAutoSendActive) {
|
|
4364
4422
|
return;
|
|
4365
4423
|
}
|
|
@@ -4596,13 +4654,13 @@ var ChatInput = (0, import_react7.memo)(function ChatInput2({
|
|
|
4596
4654
|
});
|
|
4597
4655
|
|
|
4598
4656
|
// src/components/chat/UserProfile.tsx
|
|
4599
|
-
var
|
|
4657
|
+
var import_react9 = require("react");
|
|
4600
4658
|
|
|
4601
4659
|
// src/components/ui/scroll-area.tsx
|
|
4602
|
-
var
|
|
4660
|
+
var React14 = __toESM(require("react"), 1);
|
|
4603
4661
|
var ScrollAreaPrimitive = __toESM(require("@radix-ui/react-scroll-area"), 1);
|
|
4604
4662
|
var import_jsx_runtime25 = require("react/jsx-runtime");
|
|
4605
|
-
var ScrollArea =
|
|
4663
|
+
var ScrollArea = React14.forwardRef(({ className, children, viewportClassName, onScroll, onScrollCapture, ...props }, ref) => {
|
|
4606
4664
|
return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
|
|
4607
4665
|
ScrollAreaPrimitive.Root,
|
|
4608
4666
|
{
|
|
@@ -4770,10 +4828,10 @@ var UserProfile = ({
|
|
|
4770
4828
|
onDeleteMemory,
|
|
4771
4829
|
className
|
|
4772
4830
|
}) => {
|
|
4773
|
-
const [newMemoryContent, setNewMemoryContent] = (0,
|
|
4774
|
-
const [isAddingMemory, setIsAddingMemory] = (0,
|
|
4775
|
-
const [editingMemoryId, setEditingMemoryId] = (0,
|
|
4776
|
-
const [editingMemoryContent, setEditingMemoryContent] = (0,
|
|
4831
|
+
const [newMemoryContent, setNewMemoryContent] = (0, import_react9.useState)("");
|
|
4832
|
+
const [isAddingMemory, setIsAddingMemory] = (0, import_react9.useState)(false);
|
|
4833
|
+
const [editingMemoryId, setEditingMemoryId] = (0, import_react9.useState)(null);
|
|
4834
|
+
const [editingMemoryContent, setEditingMemoryContent] = (0, import_react9.useState)("");
|
|
4777
4835
|
const handleAddMemory = () => {
|
|
4778
4836
|
if (newMemoryContent.trim() && onAddMemory) {
|
|
4779
4837
|
onAddMemory(newMemoryContent.trim(), "other");
|
|
@@ -5049,7 +5107,9 @@ function getMessageSpeakerKey(message) {
|
|
|
5049
5107
|
}
|
|
5050
5108
|
function getAssistantSpeakerTokens(message) {
|
|
5051
5109
|
if (!message || message.role !== "assistant") return [];
|
|
5052
|
-
const rawTokens = [message.senderAgentId, message.senderName].filter(
|
|
5110
|
+
const rawTokens = [message.senderAgentId, message.senderName].filter(
|
|
5111
|
+
(value) => typeof value === "string" && value.trim().length > 0
|
|
5112
|
+
).map((value) => value.trim().toLowerCase());
|
|
5053
5113
|
if (rawTokens.length > 0) {
|
|
5054
5114
|
return Array.from(new Set(rawTokens));
|
|
5055
5115
|
}
|
|
@@ -5083,7 +5143,9 @@ var mergeReasoning = (activities) => {
|
|
|
5083
5143
|
return segments.filter((segment, index) => index === 0 || segment !== segments[index - 1]).join("\n\n");
|
|
5084
5144
|
};
|
|
5085
5145
|
var mergeGroupActivity = (messages) => {
|
|
5086
|
-
const activities = messages.map((message) => message.activity).filter(
|
|
5146
|
+
const activities = messages.map((message) => message.activity).filter(
|
|
5147
|
+
(activity) => Boolean(activity)
|
|
5148
|
+
);
|
|
5087
5149
|
if (activities.length === 0) return void 0;
|
|
5088
5150
|
const lastActivity = activities[activities.length - 1];
|
|
5089
5151
|
const mergedReasoning = mergeReasoning(activities);
|
|
@@ -5147,6 +5209,8 @@ var ChatUI = ({
|
|
|
5147
5209
|
currentThreadId = null,
|
|
5148
5210
|
config: userConfig,
|
|
5149
5211
|
sidebar: _sidebar,
|
|
5212
|
+
userMenuSections,
|
|
5213
|
+
userMenuAdditionalItems,
|
|
5150
5214
|
isGenerating = false,
|
|
5151
5215
|
isMessagesLoading = false,
|
|
5152
5216
|
isLoadingOlderMessages = false,
|
|
@@ -5171,12 +5235,12 @@ var ChatUI = ({
|
|
|
5171
5235
|
initialInput,
|
|
5172
5236
|
onInitialInputConsumed
|
|
5173
5237
|
}) => {
|
|
5174
|
-
const config = (0,
|
|
5238
|
+
const config = (0, import_react10.useMemo)(
|
|
5175
5239
|
() => mergeConfig(defaultChatConfig, userConfig),
|
|
5176
5240
|
[userConfig]
|
|
5177
5241
|
);
|
|
5178
|
-
const [isMobile, setIsMobile] = (0,
|
|
5179
|
-
const [isUserProfileOpen, setIsUserProfileOpen] = (0,
|
|
5242
|
+
const [isMobile, setIsMobile] = (0, import_react10.useState)(false);
|
|
5243
|
+
const [isUserProfileOpen, setIsUserProfileOpen] = (0, import_react10.useState)(false);
|
|
5180
5244
|
let userContext;
|
|
5181
5245
|
try {
|
|
5182
5246
|
const contextValue = useChatUserContext();
|
|
@@ -5190,10 +5254,10 @@ var ChatUI = ({
|
|
|
5190
5254
|
}
|
|
5191
5255
|
return false;
|
|
5192
5256
|
};
|
|
5193
|
-
const [inputValue, setInputValue] = (0,
|
|
5194
|
-
const [attachments, setAttachments] = (0,
|
|
5195
|
-
const [expandedMessageIds, setExpandedMessageIds] = (0,
|
|
5196
|
-
const [state, setState] = (0,
|
|
5257
|
+
const [inputValue, setInputValue] = (0, import_react10.useState)("");
|
|
5258
|
+
const [attachments, setAttachments] = (0, import_react10.useState)([]);
|
|
5259
|
+
const [expandedMessageIds, setExpandedMessageIds] = (0, import_react10.useState)({});
|
|
5260
|
+
const [state, setState] = (0, import_react10.useState)({
|
|
5197
5261
|
isRecording: false,
|
|
5198
5262
|
selectedThreadId: currentThreadId,
|
|
5199
5263
|
isAtBottom: true,
|
|
@@ -5205,43 +5269,45 @@ var ChatUI = ({
|
|
|
5205
5269
|
isSidebarCollapsed: false
|
|
5206
5270
|
// No longer used for main sidebar
|
|
5207
5271
|
});
|
|
5208
|
-
(0,
|
|
5272
|
+
(0, import_react10.useEffect)(() => {
|
|
5209
5273
|
if (currentThreadId !== state.selectedThreadId) {
|
|
5210
5274
|
setState((prev) => ({ ...prev, selectedThreadId: currentThreadId }));
|
|
5211
5275
|
}
|
|
5212
5276
|
}, [currentThreadId]);
|
|
5213
|
-
const initialInputApplied = (0,
|
|
5214
|
-
const initialInputConsumedRef = (0,
|
|
5215
|
-
(0,
|
|
5277
|
+
const initialInputApplied = (0, import_react10.useRef)(false);
|
|
5278
|
+
const initialInputConsumedRef = (0, import_react10.useRef)(false);
|
|
5279
|
+
(0, import_react10.useEffect)(() => {
|
|
5216
5280
|
if (initialInput && !initialInputApplied.current) {
|
|
5217
5281
|
setInputValue(initialInput);
|
|
5218
5282
|
initialInputApplied.current = true;
|
|
5219
5283
|
}
|
|
5220
5284
|
}, [initialInput]);
|
|
5221
|
-
const scrollAreaRef = (0,
|
|
5222
|
-
const prependSnapshotRef = (0,
|
|
5223
|
-
const stateRef = (0,
|
|
5224
|
-
const inputValueRef = (0,
|
|
5225
|
-
const attachmentsRef = (0,
|
|
5226
|
-
(0,
|
|
5285
|
+
const scrollAreaRef = (0, import_react10.useRef)(null);
|
|
5286
|
+
const prependSnapshotRef = (0, import_react10.useRef)(null);
|
|
5287
|
+
const stateRef = (0, import_react10.useRef)(state);
|
|
5288
|
+
const inputValueRef = (0, import_react10.useRef)(inputValue);
|
|
5289
|
+
const attachmentsRef = (0, import_react10.useRef)(attachments);
|
|
5290
|
+
(0, import_react10.useEffect)(() => {
|
|
5227
5291
|
stateRef.current = state;
|
|
5228
5292
|
}, [state]);
|
|
5229
|
-
(0,
|
|
5293
|
+
(0, import_react10.useEffect)(() => {
|
|
5230
5294
|
inputValueRef.current = inputValue;
|
|
5231
5295
|
}, [inputValue]);
|
|
5232
|
-
(0,
|
|
5296
|
+
(0, import_react10.useEffect)(() => {
|
|
5233
5297
|
attachmentsRef.current = attachments;
|
|
5234
5298
|
}, [attachments]);
|
|
5235
|
-
const [isCustomMounted, setIsCustomMounted] = (0,
|
|
5236
|
-
const [isCustomVisible, setIsCustomVisible] = (0,
|
|
5237
|
-
const groupedMessages = (0,
|
|
5299
|
+
const [isCustomMounted, setIsCustomMounted] = (0, import_react10.useState)(false);
|
|
5300
|
+
const [isCustomVisible, setIsCustomVisible] = (0, import_react10.useState)(false);
|
|
5301
|
+
const groupedMessages = (0, import_react10.useMemo)(() => groupMessagesForRender(messages), [
|
|
5302
|
+
messages
|
|
5303
|
+
]);
|
|
5238
5304
|
const virtualizer = (0, import_react_virtual.useVirtualizer)({
|
|
5239
5305
|
count: groupedMessages.length,
|
|
5240
5306
|
getScrollElement: () => scrollAreaRef.current,
|
|
5241
5307
|
estimateSize: () => 100,
|
|
5242
5308
|
overscan: 5
|
|
5243
5309
|
});
|
|
5244
|
-
const createStateCallback = (0,
|
|
5310
|
+
const createStateCallback = (0, import_react10.useCallback)(
|
|
5245
5311
|
(setter) => ({
|
|
5246
5312
|
setState: (newState) => setter?.(newState),
|
|
5247
5313
|
getState: () => ({
|
|
@@ -5253,7 +5319,7 @@ var ChatUI = ({
|
|
|
5253
5319
|
[]
|
|
5254
5320
|
// No dependencies - uses refs for latest state
|
|
5255
5321
|
);
|
|
5256
|
-
(0,
|
|
5322
|
+
(0, import_react10.useEffect)(() => {
|
|
5257
5323
|
const checkMobile = () => {
|
|
5258
5324
|
setIsMobile(globalThis.innerWidth < 1024);
|
|
5259
5325
|
};
|
|
@@ -5261,7 +5327,7 @@ var ChatUI = ({
|
|
|
5261
5327
|
globalThis.addEventListener("resize", checkMobile);
|
|
5262
5328
|
return () => globalThis.removeEventListener("resize", checkMobile);
|
|
5263
5329
|
}, []);
|
|
5264
|
-
(0,
|
|
5330
|
+
(0, import_react10.useEffect)(() => {
|
|
5265
5331
|
if (!isMobile || !config.customComponent?.component) return;
|
|
5266
5332
|
if (state.showSidebar) {
|
|
5267
5333
|
setIsCustomMounted(true);
|
|
@@ -5272,8 +5338,8 @@ var ChatUI = ({
|
|
|
5272
5338
|
return () => clearTimeout(t);
|
|
5273
5339
|
}
|
|
5274
5340
|
}, [state.showSidebar, isMobile, config.customComponent]);
|
|
5275
|
-
const prevMessageCountRef = (0,
|
|
5276
|
-
(0,
|
|
5341
|
+
const prevMessageCountRef = (0, import_react10.useRef)(0);
|
|
5342
|
+
(0, import_react10.useEffect)(() => {
|
|
5277
5343
|
if (groupedMessages.length === 0) {
|
|
5278
5344
|
prevMessageCountRef.current = 0;
|
|
5279
5345
|
return;
|
|
@@ -5287,7 +5353,9 @@ var ChatUI = ({
|
|
|
5287
5353
|
if (wasEmpty) {
|
|
5288
5354
|
requestAnimationFrame(() => {
|
|
5289
5355
|
requestAnimationFrame(() => {
|
|
5290
|
-
virtualizer.scrollToIndex(groupedMessages.length - 1, {
|
|
5356
|
+
virtualizer.scrollToIndex(groupedMessages.length - 1, {
|
|
5357
|
+
align: "end"
|
|
5358
|
+
});
|
|
5291
5359
|
});
|
|
5292
5360
|
});
|
|
5293
5361
|
return;
|
|
@@ -5303,13 +5371,13 @@ var ChatUI = ({
|
|
|
5303
5371
|
}
|
|
5304
5372
|
});
|
|
5305
5373
|
}, [groupedMessages, state.isAtBottom, virtualizer]);
|
|
5306
|
-
(0,
|
|
5374
|
+
(0, import_react10.useEffect)(() => {
|
|
5307
5375
|
virtualizer.measure();
|
|
5308
5376
|
}, [expandedMessageIds, virtualizer]);
|
|
5309
|
-
(0,
|
|
5377
|
+
(0, import_react10.useEffect)(() => {
|
|
5310
5378
|
prependSnapshotRef.current = null;
|
|
5311
5379
|
}, [currentThreadId]);
|
|
5312
|
-
(0,
|
|
5380
|
+
(0, import_react10.useEffect)(() => {
|
|
5313
5381
|
const snapshot = prependSnapshotRef.current;
|
|
5314
5382
|
if (!snapshot) return;
|
|
5315
5383
|
if (groupedMessages.length <= snapshot.messageCount) {
|
|
@@ -5335,7 +5403,7 @@ var ChatUI = ({
|
|
|
5335
5403
|
});
|
|
5336
5404
|
});
|
|
5337
5405
|
}, [groupedMessages, isLoadingOlderMessages, virtualizer]);
|
|
5338
|
-
const requestOlderMessages = (0,
|
|
5406
|
+
const requestOlderMessages = (0, import_react10.useCallback)(() => {
|
|
5339
5407
|
if (!onLoadOlderMessages || !hasMoreMessagesBefore || isLoadingOlderMessages) return;
|
|
5340
5408
|
const viewport = scrollAreaRef.current;
|
|
5341
5409
|
prependSnapshotRef.current = viewport ? {
|
|
@@ -5345,12 +5413,19 @@ var ChatUI = ({
|
|
|
5345
5413
|
messageCount: groupedMessages.length
|
|
5346
5414
|
} : null;
|
|
5347
5415
|
onLoadOlderMessages();
|
|
5348
|
-
}, [
|
|
5349
|
-
|
|
5416
|
+
}, [
|
|
5417
|
+
groupedMessages,
|
|
5418
|
+
hasMoreMessagesBefore,
|
|
5419
|
+
isLoadingOlderMessages,
|
|
5420
|
+
onLoadOlderMessages
|
|
5421
|
+
]);
|
|
5422
|
+
(0, import_react10.useEffect)(() => {
|
|
5350
5423
|
const validMessageIds = new Set(groupedMessages.map((group) => group.id));
|
|
5351
5424
|
setExpandedMessageIds((prev) => {
|
|
5352
5425
|
const activeIds = Object.keys(prev);
|
|
5353
|
-
const staleIds = activeIds.filter(
|
|
5426
|
+
const staleIds = activeIds.filter(
|
|
5427
|
+
(messageId) => !validMessageIds.has(messageId)
|
|
5428
|
+
);
|
|
5354
5429
|
if (staleIds.length === 0) {
|
|
5355
5430
|
return prev;
|
|
5356
5431
|
}
|
|
@@ -5361,7 +5436,7 @@ var ChatUI = ({
|
|
|
5361
5436
|
return next;
|
|
5362
5437
|
});
|
|
5363
5438
|
}, [groupedMessages]);
|
|
5364
|
-
const handleScroll = (0,
|
|
5439
|
+
const handleScroll = (0, import_react10.useCallback)((e) => {
|
|
5365
5440
|
const { scrollTop, scrollHeight, clientHeight } = e.currentTarget;
|
|
5366
5441
|
const isAtBottom = scrollHeight - scrollTop - clientHeight < 50;
|
|
5367
5442
|
const isNearTop = scrollTop < 120;
|
|
@@ -5373,9 +5448,13 @@ var ChatUI = ({
|
|
|
5373
5448
|
return { ...prev, isAtBottom };
|
|
5374
5449
|
});
|
|
5375
5450
|
}, [hasMoreMessagesBefore, isLoadingOlderMessages, requestOlderMessages]);
|
|
5376
|
-
const handleSendMessage = (0,
|
|
5451
|
+
const handleSendMessage = (0, import_react10.useCallback)((content, messageAttachments = []) => {
|
|
5377
5452
|
if (!content.trim() && messageAttachments.length === 0) return;
|
|
5378
|
-
callbacks.onSendMessage?.(
|
|
5453
|
+
callbacks.onSendMessage?.(
|
|
5454
|
+
content,
|
|
5455
|
+
messageAttachments,
|
|
5456
|
+
createStateCallback()
|
|
5457
|
+
);
|
|
5379
5458
|
if (initialInputApplied.current && !initialInputConsumedRef.current) {
|
|
5380
5459
|
initialInputConsumedRef.current = true;
|
|
5381
5460
|
onInitialInputConsumed?.();
|
|
@@ -5383,11 +5462,15 @@ var ChatUI = ({
|
|
|
5383
5462
|
setInputValue("");
|
|
5384
5463
|
setAttachments([]);
|
|
5385
5464
|
}, [callbacks, createStateCallback, onInitialInputConsumed]);
|
|
5386
|
-
const handleMessageAction = (0,
|
|
5465
|
+
const handleMessageAction = (0, import_react10.useCallback)((event) => {
|
|
5387
5466
|
const { action, messageId, content } = event;
|
|
5388
5467
|
switch (action) {
|
|
5389
5468
|
case "copy":
|
|
5390
|
-
callbacks.onCopyMessage?.(
|
|
5469
|
+
callbacks.onCopyMessage?.(
|
|
5470
|
+
messageId,
|
|
5471
|
+
content || "",
|
|
5472
|
+
createStateCallback()
|
|
5473
|
+
);
|
|
5391
5474
|
break;
|
|
5392
5475
|
case "edit":
|
|
5393
5476
|
if (content) {
|
|
@@ -5402,7 +5485,7 @@ var ChatUI = ({
|
|
|
5402
5485
|
break;
|
|
5403
5486
|
}
|
|
5404
5487
|
}, [callbacks, createStateCallback]);
|
|
5405
|
-
const handleToggleMessageExpansion = (0,
|
|
5488
|
+
const handleToggleMessageExpansion = (0, import_react10.useCallback)((messageId) => {
|
|
5406
5489
|
setExpandedMessageIds((prev) => {
|
|
5407
5490
|
if (prev[messageId]) {
|
|
5408
5491
|
const next = { ...prev };
|
|
@@ -5415,44 +5498,52 @@ var ChatUI = ({
|
|
|
5415
5498
|
};
|
|
5416
5499
|
});
|
|
5417
5500
|
}, []);
|
|
5418
|
-
const handleCreateThread = (0,
|
|
5501
|
+
const handleCreateThread = (0, import_react10.useCallback)((title) => {
|
|
5419
5502
|
callbacks.onCreateThread?.(title, createStateCallback());
|
|
5420
5503
|
}, [callbacks, createStateCallback]);
|
|
5421
|
-
const handleSelectThread = (0,
|
|
5504
|
+
const handleSelectThread = (0, import_react10.useCallback)((threadId) => {
|
|
5422
5505
|
callbacks.onSelectThread?.(threadId, createStateCallback());
|
|
5423
5506
|
}, [callbacks, createStateCallback]);
|
|
5424
|
-
const handleRenameThread = (0,
|
|
5425
|
-
|
|
5426
|
-
|
|
5427
|
-
|
|
5507
|
+
const handleRenameThread = (0, import_react10.useCallback)(
|
|
5508
|
+
(threadId, newTitle) => {
|
|
5509
|
+
callbacks.onRenameThread?.(threadId, newTitle, createStateCallback());
|
|
5510
|
+
},
|
|
5511
|
+
[callbacks, createStateCallback]
|
|
5512
|
+
);
|
|
5513
|
+
const handleDeleteThread = (0, import_react10.useCallback)((threadId) => {
|
|
5428
5514
|
callbacks.onDeleteThread?.(threadId, createStateCallback());
|
|
5429
5515
|
}, [callbacks, createStateCallback]);
|
|
5430
|
-
const handleArchiveThread = (0,
|
|
5516
|
+
const handleArchiveThread = (0, import_react10.useCallback)((threadId) => {
|
|
5431
5517
|
callbacks.onArchiveThread?.(threadId, createStateCallback());
|
|
5432
5518
|
}, [callbacks, createStateCallback]);
|
|
5433
|
-
const closeSidebar = (0,
|
|
5519
|
+
const closeSidebar = (0, import_react10.useCallback)(() => {
|
|
5434
5520
|
setState((prev) => ({ ...prev, showSidebar: false }));
|
|
5435
5521
|
}, []);
|
|
5436
|
-
const handleCustomComponentToggle = (0,
|
|
5522
|
+
const handleCustomComponentToggle = (0, import_react10.useCallback)(() => {
|
|
5437
5523
|
setState((prev) => ({ ...prev, showSidebar: !prev.showSidebar }));
|
|
5438
5524
|
}, []);
|
|
5439
|
-
const sidebarUser = (0,
|
|
5525
|
+
const sidebarUser = (0, import_react10.useMemo)(() => user ? {
|
|
5440
5526
|
id: user.id,
|
|
5441
5527
|
name: user.name,
|
|
5442
5528
|
email: user.email,
|
|
5443
5529
|
avatar: user.avatar
|
|
5444
5530
|
} : null, [user?.id, user?.name, user?.email, user?.avatar]);
|
|
5445
|
-
const handleViewProfile = (0,
|
|
5531
|
+
const handleViewProfile = (0, import_react10.useCallback)(() => {
|
|
5446
5532
|
setIsUserProfileOpen(true);
|
|
5447
5533
|
callbacks.onViewProfile?.();
|
|
5448
5534
|
}, [callbacks.onViewProfile]);
|
|
5449
|
-
const sidebarUserMenuCallbacks = (0,
|
|
5535
|
+
const sidebarUserMenuCallbacks = (0, import_react10.useMemo)(() => ({
|
|
5450
5536
|
onViewProfile: handleViewProfile,
|
|
5451
5537
|
onOpenSettings: callbacks.onOpenSettings,
|
|
5452
5538
|
onThemeChange: callbacks.onThemeChange,
|
|
5453
5539
|
onLogout: callbacks.onLogout
|
|
5454
|
-
}), [
|
|
5455
|
-
|
|
5540
|
+
}), [
|
|
5541
|
+
handleViewProfile,
|
|
5542
|
+
callbacks.onOpenSettings,
|
|
5543
|
+
callbacks.onThemeChange,
|
|
5544
|
+
callbacks.onLogout
|
|
5545
|
+
]);
|
|
5546
|
+
const renderCustomComponent = (0, import_react10.useCallback)(() => {
|
|
5456
5547
|
const component = config?.customComponent?.component;
|
|
5457
5548
|
if (!component) return null;
|
|
5458
5549
|
if (typeof component === "function") {
|
|
@@ -5492,19 +5583,25 @@ var ChatUI = ({
|
|
|
5492
5583
|
const items = messageSuggestions?.[messageId];
|
|
5493
5584
|
if (!items || items.length === 0) return null;
|
|
5494
5585
|
const inlineSuggestionOffsetClass = config.ui.showAvatars ? config.ui.compactMode ? "ml-9" : "ml-11" : "";
|
|
5495
|
-
return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
5496
|
-
"
|
|
5586
|
+
return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
5587
|
+
"div",
|
|
5497
5588
|
{
|
|
5498
|
-
|
|
5499
|
-
|
|
5500
|
-
|
|
5501
|
-
|
|
5502
|
-
|
|
5503
|
-
|
|
5504
|
-
|
|
5505
|
-
|
|
5506
|
-
|
|
5507
|
-
|
|
5589
|
+
className: `flex flex-wrap gap-2 mt-2 ${inlineSuggestionOffsetClass}`,
|
|
5590
|
+
children: items.map((suggestion, index) => /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
|
|
5591
|
+
"button",
|
|
5592
|
+
{
|
|
5593
|
+
type: "button",
|
|
5594
|
+
onClick: () => handleSendMessage(suggestion),
|
|
5595
|
+
className: "group inline-flex items-center gap-1.5 px-3 py-1.5 text-sm rounded-full border border-border bg-background hover:bg-accent hover:border-accent-foreground/20 transition-all duration-150 text-foreground/80 hover:text-foreground",
|
|
5596
|
+
children: [
|
|
5597
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react14.Sparkles, { className: "h-3 w-3 text-primary opacity-70 group-hover:opacity-100" }),
|
|
5598
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "max-w-[200px] truncate", children: suggestion })
|
|
5599
|
+
]
|
|
5600
|
+
},
|
|
5601
|
+
`${messageId}-suggestion-${index}`
|
|
5602
|
+
))
|
|
5603
|
+
}
|
|
5604
|
+
);
|
|
5508
5605
|
};
|
|
5509
5606
|
const renderMessageLoadingSkeleton = () => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "space-y-6 py-2", children: [0, 1, 2, 3].map((index) => {
|
|
5510
5607
|
const isUserRow = index % 2 === 1;
|
|
@@ -5526,7 +5623,7 @@ var ChatUI = ({
|
|
|
5526
5623
|
);
|
|
5527
5624
|
}) });
|
|
5528
5625
|
const isMultiAgentMode = config.agentSelector?.mode === "multi";
|
|
5529
|
-
const messageProps = (0,
|
|
5626
|
+
const messageProps = (0, import_react10.useMemo)(() => ({
|
|
5530
5627
|
userAvatar: user?.avatar,
|
|
5531
5628
|
userName: user?.name,
|
|
5532
5629
|
assistantAvatar: assistant?.avatar,
|
|
@@ -5579,201 +5676,229 @@ var ChatUI = ({
|
|
|
5579
5676
|
const shouldShowAgentSelector = Boolean(
|
|
5580
5677
|
config.agentSelector?.enabled && agentOptions.length > 0 && (!config.agentSelector?.hideIfSingle || agentOptions.length > 1) && (isMultiAgentMode ? onParticipantsChange : onSelectAgent)
|
|
5581
5678
|
);
|
|
5582
|
-
return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(TooltipProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(SidebarProvider, { defaultOpen: true, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
|
|
5583
|
-
|
|
5584
|
-
|
|
5585
|
-
{
|
|
5586
|
-
|
|
5587
|
-
|
|
5588
|
-
|
|
5589
|
-
|
|
5590
|
-
|
|
5591
|
-
|
|
5592
|
-
|
|
5593
|
-
|
|
5594
|
-
|
|
5595
|
-
|
|
5596
|
-
|
|
5597
|
-
|
|
5598
|
-
|
|
5599
|
-
|
|
5600
|
-
|
|
5601
|
-
|
|
5602
|
-
|
|
5603
|
-
|
|
5604
|
-
|
|
5605
|
-
|
|
5606
|
-
|
|
5607
|
-
onCustomComponentToggle: handleCustomComponentToggle,
|
|
5608
|
-
onNewThread: handleCreateThread,
|
|
5609
|
-
showCustomComponentButton: !!config?.customComponent?.component,
|
|
5610
|
-
showAgentSelector: shouldShowAgentSelector,
|
|
5611
|
-
isMultiAgentMode,
|
|
5612
|
-
agentOptions,
|
|
5613
|
-
selectedAgentId,
|
|
5614
|
-
onSelectAgent,
|
|
5615
|
-
participantIds,
|
|
5616
|
-
onParticipantsChange
|
|
5617
|
-
}
|
|
5618
|
-
),
|
|
5619
|
-
/* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex flex-1 flex-row min-h-0 overflow-hidden", children: [
|
|
5620
|
-
/* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex-1 flex flex-col min-h-0", children: [
|
|
5679
|
+
return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(TooltipProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(SidebarProvider, { defaultOpen: true, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
|
|
5680
|
+
"div",
|
|
5681
|
+
{
|
|
5682
|
+
className: `flex h-[100svh] md:h-screen bg-background w-full overflow-hidden ${className}`,
|
|
5683
|
+
children: [
|
|
5684
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
5685
|
+
Sidebar2,
|
|
5686
|
+
{
|
|
5687
|
+
threads,
|
|
5688
|
+
currentThreadId: state.selectedThreadId,
|
|
5689
|
+
config,
|
|
5690
|
+
onCreateThread: handleCreateThread,
|
|
5691
|
+
onSelectThread: handleSelectThread,
|
|
5692
|
+
onRenameThread: handleRenameThread,
|
|
5693
|
+
onDeleteThread: handleDeleteThread,
|
|
5694
|
+
onArchiveThread: handleArchiveThread,
|
|
5695
|
+
user: sidebarUser,
|
|
5696
|
+
userMenuCallbacks: sidebarUserMenuCallbacks,
|
|
5697
|
+
currentTheme: config.ui.theme === "auto" ? "system" : config.ui.theme,
|
|
5698
|
+
showThemeOptions: !!callbacks.onThemeChange,
|
|
5699
|
+
userMenuSections,
|
|
5700
|
+
userMenuAdditionalItems
|
|
5701
|
+
}
|
|
5702
|
+
),
|
|
5703
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)(SidebarInset, { children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex flex-col h-full min-h-0", children: [
|
|
5621
5704
|
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
5622
|
-
|
|
5705
|
+
ChatHeader,
|
|
5623
5706
|
{
|
|
5624
|
-
|
|
5625
|
-
|
|
5626
|
-
|
|
5627
|
-
|
|
5628
|
-
|
|
5629
|
-
|
|
5630
|
-
|
|
5631
|
-
|
|
5707
|
+
config,
|
|
5708
|
+
currentThreadTitle: threads.find(
|
|
5709
|
+
(t) => t.id === state.selectedThreadId
|
|
5710
|
+
)?.title,
|
|
5711
|
+
isMobile,
|
|
5712
|
+
onCustomComponentToggle: handleCustomComponentToggle,
|
|
5713
|
+
onNewThread: handleCreateThread,
|
|
5714
|
+
showCustomComponentButton: !!config?.customComponent?.component,
|
|
5715
|
+
showAgentSelector: shouldShowAgentSelector,
|
|
5716
|
+
isMultiAgentMode,
|
|
5717
|
+
agentOptions,
|
|
5718
|
+
selectedAgentId,
|
|
5719
|
+
onSelectAgent,
|
|
5720
|
+
participantIds,
|
|
5721
|
+
onParticipantsChange
|
|
5722
|
+
}
|
|
5723
|
+
),
|
|
5724
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex flex-1 flex-row min-h-0 overflow-hidden", children: [
|
|
5725
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex-1 flex flex-col min-h-0", children: [
|
|
5726
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
5727
|
+
ScrollArea,
|
|
5728
|
+
{
|
|
5729
|
+
ref: scrollAreaRef,
|
|
5730
|
+
className: "flex-1 min-h-0",
|
|
5731
|
+
viewportClassName: "p-4 overscroll-contain",
|
|
5732
|
+
onScrollCapture: handleScroll,
|
|
5733
|
+
style: { contain: "strict" },
|
|
5734
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "max-w-4xl mx-auto pb-4", children: [
|
|
5735
|
+
groupedMessages.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "flex justify-center py-2", children: isLoadingOlderMessages ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "text-xs text-muted-foreground", children: config.labels.loadingOlderMessages }) : hasMoreMessagesBefore ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
5736
|
+
"button",
|
|
5737
|
+
{
|
|
5738
|
+
type: "button",
|
|
5739
|
+
onClick: requestOlderMessages,
|
|
5740
|
+
className: "text-xs text-muted-foreground transition-colors hover:text-foreground",
|
|
5741
|
+
children: config.labels.loadOlderMessages
|
|
5742
|
+
}
|
|
5743
|
+
) : null }),
|
|
5744
|
+
isMessagesLoading ? renderMessageLoadingSkeleton() : groupedMessages.length === 0 ? renderSuggestions() : /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
5745
|
+
"div",
|
|
5746
|
+
{
|
|
5747
|
+
style: {
|
|
5748
|
+
height: `${virtualizer.getTotalSize()}px`,
|
|
5749
|
+
width: "100%",
|
|
5750
|
+
position: "relative"
|
|
5751
|
+
},
|
|
5752
|
+
children: virtualizer.getVirtualItems().map((virtualRow) => {
|
|
5753
|
+
const group = groupedMessages[virtualRow.index];
|
|
5754
|
+
const message = group.message;
|
|
5755
|
+
return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
5756
|
+
"div",
|
|
5757
|
+
{
|
|
5758
|
+
"data-index": virtualRow.index,
|
|
5759
|
+
ref: virtualizer.measureElement,
|
|
5760
|
+
style: {
|
|
5761
|
+
position: "absolute",
|
|
5762
|
+
top: 0,
|
|
5763
|
+
left: 0,
|
|
5764
|
+
width: "100%",
|
|
5765
|
+
transform: `translateY(${virtualRow.start}px)`
|
|
5766
|
+
},
|
|
5767
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
|
|
5768
|
+
"div",
|
|
5769
|
+
{
|
|
5770
|
+
className: virtualRow.index === 0 ? "" : "pt-4",
|
|
5771
|
+
children: [
|
|
5772
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
5773
|
+
Message,
|
|
5774
|
+
{
|
|
5775
|
+
message,
|
|
5776
|
+
...messageProps,
|
|
5777
|
+
isExpanded: Boolean(
|
|
5778
|
+
expandedMessageIds[message.id]
|
|
5779
|
+
)
|
|
5780
|
+
}
|
|
5781
|
+
),
|
|
5782
|
+
message.role === "assistant" && renderInlineSuggestions(
|
|
5783
|
+
group.suggestionMessageId
|
|
5784
|
+
)
|
|
5785
|
+
]
|
|
5786
|
+
}
|
|
5787
|
+
)
|
|
5788
|
+
},
|
|
5789
|
+
group.id
|
|
5790
|
+
);
|
|
5791
|
+
})
|
|
5792
|
+
}
|
|
5793
|
+
)
|
|
5794
|
+
] })
|
|
5795
|
+
}
|
|
5796
|
+
),
|
|
5797
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "bg-background pb-[env(safe-area-inset-bottom)]", children: [
|
|
5798
|
+
isMultiAgentMode && shouldShowAgentSelector && onTargetAgentChange && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "px-4 pt-1", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
5799
|
+
TargetAgentSelector,
|
|
5632
5800
|
{
|
|
5633
|
-
|
|
5634
|
-
|
|
5635
|
-
|
|
5636
|
-
|
|
5801
|
+
agents: participantIds && participantIds.length > 0 ? agentOptions.filter(
|
|
5802
|
+
(a) => participantIds.includes(a.id)
|
|
5803
|
+
) : agentOptions,
|
|
5804
|
+
targetAgentId,
|
|
5805
|
+
onTargetChange: onTargetAgentChange,
|
|
5806
|
+
placeholder: config.agentSelector?.label || "Select agent",
|
|
5807
|
+
disabled: isGenerating
|
|
5637
5808
|
}
|
|
5638
|
-
)
|
|
5639
|
-
|
|
5640
|
-
|
|
5809
|
+
) }),
|
|
5810
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
5811
|
+
ChatInput,
|
|
5641
5812
|
{
|
|
5642
|
-
|
|
5643
|
-
|
|
5644
|
-
|
|
5645
|
-
|
|
5813
|
+
value: inputValue,
|
|
5814
|
+
onChange: (value) => {
|
|
5815
|
+
setInputValue(value);
|
|
5816
|
+
if (initialInputApplied.current && !initialInputConsumedRef.current) {
|
|
5817
|
+
initialInputConsumedRef.current = true;
|
|
5818
|
+
onInitialInputConsumed?.();
|
|
5819
|
+
}
|
|
5646
5820
|
},
|
|
5647
|
-
|
|
5648
|
-
|
|
5649
|
-
|
|
5650
|
-
|
|
5651
|
-
|
|
5652
|
-
|
|
5653
|
-
|
|
5654
|
-
|
|
5655
|
-
|
|
5656
|
-
|
|
5657
|
-
|
|
5658
|
-
|
|
5659
|
-
|
|
5660
|
-
|
|
5661
|
-
|
|
5662
|
-
|
|
5663
|
-
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
5664
|
-
Message,
|
|
5665
|
-
{
|
|
5666
|
-
message,
|
|
5667
|
-
...messageProps,
|
|
5668
|
-
isExpanded: Boolean(expandedMessageIds[message.id])
|
|
5669
|
-
}
|
|
5670
|
-
),
|
|
5671
|
-
message.role === "assistant" && renderInlineSuggestions(group.suggestionMessageId)
|
|
5672
|
-
] })
|
|
5673
|
-
},
|
|
5674
|
-
group.id
|
|
5675
|
-
);
|
|
5676
|
-
})
|
|
5821
|
+
onSubmit: handleSendMessage,
|
|
5822
|
+
attachments,
|
|
5823
|
+
onAttachmentsChange: setAttachments,
|
|
5824
|
+
placeholder: config.labels.inputPlaceholder,
|
|
5825
|
+
disabled: false,
|
|
5826
|
+
isGenerating,
|
|
5827
|
+
onStopGeneration: callbacks.onStopGeneration,
|
|
5828
|
+
enableFileUpload: config.features.enableFileUpload,
|
|
5829
|
+
enableAudioRecording: config.features.enableAudioRecording,
|
|
5830
|
+
maxAttachments: config.features.maxAttachments,
|
|
5831
|
+
maxFileSize: config.features.maxFileSize,
|
|
5832
|
+
config,
|
|
5833
|
+
mentionAgents: participantIds && participantIds.length > 0 ? agentOptions.filter(
|
|
5834
|
+
(a) => participantIds.includes(a.id)
|
|
5835
|
+
) : agentOptions,
|
|
5836
|
+
onTargetAgentChange
|
|
5677
5837
|
}
|
|
5678
5838
|
)
|
|
5679
5839
|
] })
|
|
5680
|
-
}
|
|
5681
|
-
|
|
5682
|
-
|
|
5683
|
-
isMultiAgentMode && shouldShowAgentSelector && onTargetAgentChange && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "px-4 pt-1", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
5684
|
-
TargetAgentSelector,
|
|
5685
|
-
{
|
|
5686
|
-
agents: participantIds && participantIds.length > 0 ? agentOptions.filter((a) => participantIds.includes(a.id)) : agentOptions,
|
|
5687
|
-
targetAgentId,
|
|
5688
|
-
onTargetChange: onTargetAgentChange,
|
|
5689
|
-
placeholder: config.agentSelector?.label || "Select agent",
|
|
5690
|
-
disabled: isGenerating
|
|
5691
|
-
}
|
|
5692
|
-
) }),
|
|
5693
|
-
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
5694
|
-
ChatInput,
|
|
5840
|
+
] }),
|
|
5841
|
+
config?.customComponent?.component && !isMobile && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
5842
|
+
"div",
|
|
5695
5843
|
{
|
|
5696
|
-
|
|
5697
|
-
|
|
5698
|
-
|
|
5699
|
-
if (initialInputApplied.current && !initialInputConsumedRef.current) {
|
|
5700
|
-
initialInputConsumedRef.current = true;
|
|
5701
|
-
onInitialInputConsumed?.();
|
|
5702
|
-
}
|
|
5844
|
+
className: "h-full transition-all duration-300 ease-in-out overflow-hidden",
|
|
5845
|
+
style: {
|
|
5846
|
+
width: state.showSidebar ? config.customComponent.panelWidth ?? 320 : 0
|
|
5703
5847
|
},
|
|
5704
|
-
|
|
5705
|
-
|
|
5706
|
-
|
|
5707
|
-
|
|
5708
|
-
|
|
5709
|
-
|
|
5710
|
-
|
|
5711
|
-
|
|
5712
|
-
|
|
5713
|
-
|
|
5714
|
-
maxFileSize: config.features.maxFileSize,
|
|
5715
|
-
config,
|
|
5716
|
-
mentionAgents: participantIds && participantIds.length > 0 ? agentOptions.filter((a) => participantIds.includes(a.id)) : agentOptions,
|
|
5717
|
-
onTargetAgentChange
|
|
5848
|
+
children: state.showSidebar && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
5849
|
+
"div",
|
|
5850
|
+
{
|
|
5851
|
+
className: "h-full overflow-hidden border-l bg-background animate-in slide-in-from-right-4 duration-300",
|
|
5852
|
+
style: {
|
|
5853
|
+
width: config.customComponent.panelWidth ?? 320
|
|
5854
|
+
},
|
|
5855
|
+
children: renderCustomComponent()
|
|
5856
|
+
}
|
|
5857
|
+
)
|
|
5718
5858
|
}
|
|
5719
5859
|
)
|
|
5720
5860
|
] })
|
|
5861
|
+
] }) }),
|
|
5862
|
+
isCustomMounted && config.customComponent?.component && isMobile && /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "fixed inset-0 z-50", children: [
|
|
5863
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
5864
|
+
"div",
|
|
5865
|
+
{
|
|
5866
|
+
className: `absolute inset-0 bg-background/80 backdrop-blur-sm transition-opacity duration-200 ease-out ${isCustomVisible ? "opacity-100" : "opacity-0"}`,
|
|
5867
|
+
style: { willChange: "opacity" },
|
|
5868
|
+
onClick: closeSidebar
|
|
5869
|
+
}
|
|
5870
|
+
),
|
|
5871
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
5872
|
+
"div",
|
|
5873
|
+
{
|
|
5874
|
+
className: `absolute top-0 right-0 h-full w-full bg-background transform-gpu transition-transform duration-200 ease-out ${isCustomVisible ? "translate-x-0" : "translate-x-full"}`,
|
|
5875
|
+
style: { willChange: "transform" },
|
|
5876
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "h-full overflow-hidden", children: renderCustomComponent() })
|
|
5877
|
+
}
|
|
5878
|
+
)
|
|
5721
5879
|
] }),
|
|
5722
|
-
|
|
5723
|
-
|
|
5880
|
+
isUserProfileOpen && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
5881
|
+
UserProfile,
|
|
5724
5882
|
{
|
|
5725
|
-
|
|
5726
|
-
|
|
5727
|
-
|
|
5728
|
-
|
|
5729
|
-
|
|
5730
|
-
|
|
5731
|
-
|
|
5732
|
-
|
|
5733
|
-
|
|
5734
|
-
|
|
5883
|
+
isOpen: isUserProfileOpen,
|
|
5884
|
+
onClose: () => setIsUserProfileOpen(false),
|
|
5885
|
+
user: user ? {
|
|
5886
|
+
id: user.id,
|
|
5887
|
+
name: user.name,
|
|
5888
|
+
email: user.email,
|
|
5889
|
+
avatar: user.avatar
|
|
5890
|
+
} : null,
|
|
5891
|
+
customFields: userContext?.customFields,
|
|
5892
|
+
memories: userContext?.memories?.items,
|
|
5893
|
+
onLogout: callbacks.onLogout,
|
|
5894
|
+
onAddMemory,
|
|
5895
|
+
onUpdateMemory,
|
|
5896
|
+
onDeleteMemory
|
|
5735
5897
|
}
|
|
5736
5898
|
)
|
|
5737
|
-
]
|
|
5738
|
-
|
|
5739
|
-
|
|
5740
|
-
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
5741
|
-
"div",
|
|
5742
|
-
{
|
|
5743
|
-
className: `absolute inset-0 bg-background/80 backdrop-blur-sm transition-opacity duration-200 ease-out ${isCustomVisible ? "opacity-100" : "opacity-0"}`,
|
|
5744
|
-
style: { willChange: "opacity" },
|
|
5745
|
-
onClick: closeSidebar
|
|
5746
|
-
}
|
|
5747
|
-
),
|
|
5748
|
-
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
5749
|
-
"div",
|
|
5750
|
-
{
|
|
5751
|
-
className: `absolute top-0 right-0 h-full w-full bg-background transform-gpu transition-transform duration-200 ease-out ${isCustomVisible ? "translate-x-0" : "translate-x-full"}`,
|
|
5752
|
-
style: { willChange: "transform" },
|
|
5753
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "h-full overflow-hidden", children: renderCustomComponent() })
|
|
5754
|
-
}
|
|
5755
|
-
)
|
|
5756
|
-
] }),
|
|
5757
|
-
isUserProfileOpen && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
5758
|
-
UserProfile,
|
|
5759
|
-
{
|
|
5760
|
-
isOpen: isUserProfileOpen,
|
|
5761
|
-
onClose: () => setIsUserProfileOpen(false),
|
|
5762
|
-
user: user ? {
|
|
5763
|
-
id: user.id,
|
|
5764
|
-
name: user.name,
|
|
5765
|
-
email: user.email,
|
|
5766
|
-
avatar: user.avatar
|
|
5767
|
-
} : null,
|
|
5768
|
-
customFields: userContext?.customFields,
|
|
5769
|
-
memories: userContext?.memories?.items,
|
|
5770
|
-
onLogout: callbacks.onLogout,
|
|
5771
|
-
onAddMemory,
|
|
5772
|
-
onUpdateMemory,
|
|
5773
|
-
onDeleteMemory
|
|
5774
|
-
}
|
|
5775
|
-
)
|
|
5776
|
-
] }) }) });
|
|
5899
|
+
]
|
|
5900
|
+
}
|
|
5901
|
+
) }) });
|
|
5777
5902
|
};
|
|
5778
5903
|
// Annotate the CommonJS export names for ESM import in node:
|
|
5779
5904
|
0 && (module.exports = {
|