@hef2024/llmasaservice-ui 0.20.0 → 0.20.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/AICHATPANEL-PORT-INVENTORY.md +1 -0
- package/DEBUG-ERROR-HANDLING.md +1 -0
- package/FIX-APPLIED.md +1 -0
- package/IMPLEMENTATION-COMPLETE.md +1 -0
- package/dist/index.css +445 -0
- package/dist/index.d.mts +36 -0
- package/dist/index.d.ts +36 -0
- package/dist/index.js +1042 -438
- package/dist/index.mjs +873 -269
- package/docs/CHANGELOG-ERROR-HANDLING.md +1 -0
- package/docs/CONVERSATION-HISTORY.md +1 -0
- package/docs/ERROR-HANDLING-413.md +1 -0
- package/docs/ERROR-HANDLING-SUMMARY.md +1 -0
- package/package.json +2 -2
- package/src/AIAgentPanel.tsx +97 -1
- package/src/AIChatPanel.css +536 -0
- package/src/AIChatPanel.tsx +641 -32
- package/src/AgentPanel.tsx +3 -1
- package/src/ChatPanel.tsx +69 -29
- package/src/components/ui/Button.tsx +1 -0
- package/src/components/ui/Dialog.tsx +1 -0
- package/src/components/ui/Input.tsx +1 -0
- package/src/components/ui/Select.tsx +1 -0
- package/src/components/ui/ToolInfoModal.tsx +66 -0
- package/src/components/ui/Tooltip.tsx +1 -0
- package/src/components/ui/index.ts +1 -0
- package/src/hooks/useAgentRegistry.ts +1 -0
package/dist/index.js
CHANGED
|
@@ -1904,16 +1904,16 @@ var ChatPanel = ({
|
|
|
1904
1904
|
return /* @__PURE__ */ import_react3.default.createElement("a", __spreadValues({ href, target: "_blank", rel: "noopener noreferrer" }, props), children);
|
|
1905
1905
|
};
|
|
1906
1906
|
const convertMarkdownToHTML = (markdown) => {
|
|
1907
|
+
const markdownContent = /* @__PURE__ */ import_react3.default.createElement(
|
|
1908
|
+
import_react_markdown.default,
|
|
1909
|
+
{
|
|
1910
|
+
remarkPlugins: [import_remark_gfm.default],
|
|
1911
|
+
rehypePlugins: [import_rehype_raw.default]
|
|
1912
|
+
},
|
|
1913
|
+
markdown
|
|
1914
|
+
);
|
|
1907
1915
|
const html = import_server.default.renderToStaticMarkup(
|
|
1908
|
-
/* @__PURE__ */ import_react3.default.createElement(
|
|
1909
|
-
import_react_markdown.default,
|
|
1910
|
-
{
|
|
1911
|
-
className: markdownClass,
|
|
1912
|
-
remarkPlugins: [import_remark_gfm.default],
|
|
1913
|
-
rehypePlugins: [import_rehype_raw.default]
|
|
1914
|
-
},
|
|
1915
|
-
markdown
|
|
1916
|
-
)
|
|
1916
|
+
markdownClass ? /* @__PURE__ */ import_react3.default.createElement("div", { className: markdownClass }, markdownContent) : markdownContent
|
|
1917
1917
|
);
|
|
1918
1918
|
return html;
|
|
1919
1919
|
};
|
|
@@ -2142,10 +2142,16 @@ var ChatPanel = ({
|
|
|
2142
2142
|
},
|
|
2143
2143
|
/* @__PURE__ */ import_react3.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ import_react3.default.createElement("line", { x1: "18", x2: "6", y1: "6", y2: "18" }), /* @__PURE__ */ import_react3.default.createElement("line", { x1: "6", x2: "18", y1: "6", y2: "18" }))
|
|
2144
2144
|
)),
|
|
2145
|
-
/* @__PURE__ */ import_react3.default.createElement("div", { className: "responseArea", ref: responseAreaRef }, initialMessage && initialMessage !== "" ? /* @__PURE__ */ import_react3.default.createElement("div", { className: "history-entry" }, /* @__PURE__ */ import_react3.default.createElement("div", { className: "response" }, /* @__PURE__ */ import_react3.default.createElement(
|
|
2145
|
+
/* @__PURE__ */ import_react3.default.createElement("div", { className: "responseArea", ref: responseAreaRef }, initialMessage && initialMessage !== "" ? /* @__PURE__ */ import_react3.default.createElement("div", { className: "history-entry" }, /* @__PURE__ */ import_react3.default.createElement("div", { className: "response" }, markdownClass ? /* @__PURE__ */ import_react3.default.createElement("div", { className: markdownClass }, /* @__PURE__ */ import_react3.default.createElement(
|
|
2146
|
+
import_react_markdown.default,
|
|
2147
|
+
{
|
|
2148
|
+
remarkPlugins: [import_remark_gfm.default],
|
|
2149
|
+
rehypePlugins: [import_rehype_raw.default]
|
|
2150
|
+
},
|
|
2151
|
+
initialMessage
|
|
2152
|
+
)) : /* @__PURE__ */ import_react3.default.createElement(
|
|
2146
2153
|
import_react_markdown.default,
|
|
2147
2154
|
{
|
|
2148
|
-
className: markdownClass,
|
|
2149
2155
|
remarkPlugins: [import_remark_gfm.default],
|
|
2150
2156
|
rehypePlugins: [import_rehype_raw.default]
|
|
2151
2157
|
},
|
|
@@ -2170,10 +2176,9 @@ var ChatPanel = ({
|
|
|
2170
2176
|
return null;
|
|
2171
2177
|
})(), (() => {
|
|
2172
2178
|
if (lastKey && history[lastKey] && history[lastKey].content) {
|
|
2173
|
-
|
|
2179
|
+
const content = /* @__PURE__ */ import_react3.default.createElement(
|
|
2174
2180
|
import_react_markdown.default,
|
|
2175
2181
|
{
|
|
2176
|
-
className: markdownClass,
|
|
2177
2182
|
remarkPlugins: [import_remark_gfm.default],
|
|
2178
2183
|
rehypePlugins: [import_rehype_raw.default],
|
|
2179
2184
|
components: {
|
|
@@ -2183,27 +2188,41 @@ var ChatPanel = ({
|
|
|
2183
2188
|
},
|
|
2184
2189
|
history[lastKey].content
|
|
2185
2190
|
);
|
|
2191
|
+
return markdownClass ? /* @__PURE__ */ import_react3.default.createElement("div", { className: markdownClass }, content) : content;
|
|
2186
2192
|
}
|
|
2187
2193
|
const { cleanedText } = processThinkingTags(
|
|
2188
2194
|
response || ""
|
|
2189
2195
|
);
|
|
2190
|
-
|
|
2191
|
-
|
|
2192
|
-
|
|
2193
|
-
|
|
2194
|
-
|
|
2195
|
-
|
|
2196
|
-
|
|
2197
|
-
|
|
2198
|
-
|
|
2199
|
-
|
|
2200
|
-
|
|
2201
|
-
|
|
2202
|
-
|
|
2203
|
-
|
|
2196
|
+
if (cleanedText && cleanedText.length > 0) {
|
|
2197
|
+
const content = /* @__PURE__ */ import_react3.default.createElement(
|
|
2198
|
+
import_react_markdown.default,
|
|
2199
|
+
{
|
|
2200
|
+
remarkPlugins: [import_remark_gfm.default],
|
|
2201
|
+
rehypePlugins: [import_rehype_raw.default],
|
|
2202
|
+
components: {
|
|
2203
|
+
/*a: CustomLink,*/
|
|
2204
|
+
code: CodeBlock
|
|
2205
|
+
}
|
|
2206
|
+
},
|
|
2207
|
+
cleanedText
|
|
2208
|
+
);
|
|
2209
|
+
return markdownClass ? /* @__PURE__ */ import_react3.default.createElement("div", { className: markdownClass }, content) : content;
|
|
2210
|
+
}
|
|
2211
|
+
return null;
|
|
2212
|
+
})()) : /* @__PURE__ */ import_react3.default.createElement("div", null, isLastEntry && thinkingBlocks.length > 0 && renderThinkingBlocks(), markdownClass ? /* @__PURE__ */ import_react3.default.createElement("div", { className: markdownClass }, /* @__PURE__ */ import_react3.default.createElement(
|
|
2213
|
+
import_react_markdown.default,
|
|
2214
|
+
{
|
|
2215
|
+
remarkPlugins: [import_remark_gfm.default],
|
|
2216
|
+
rehypePlugins: [import_rehype_raw.default],
|
|
2217
|
+
components: {
|
|
2218
|
+
/*a: CustomLink,*/
|
|
2219
|
+
code: CodeBlock
|
|
2220
|
+
}
|
|
2221
|
+
},
|
|
2222
|
+
processThinkingTags(historyEntry.content).cleanedText
|
|
2223
|
+
)) : /* @__PURE__ */ import_react3.default.createElement(
|
|
2204
2224
|
import_react_markdown.default,
|
|
2205
2225
|
{
|
|
2206
|
-
className: markdownClass,
|
|
2207
2226
|
remarkPlugins: [import_remark_gfm.default],
|
|
2208
2227
|
rehypePlugins: [import_rehype_raw.default],
|
|
2209
2228
|
components: {
|
|
@@ -2951,7 +2970,7 @@ var AgentPanel = ({
|
|
|
2951
2970
|
(0, import_react4.useEffect)(() => {
|
|
2952
2971
|
const fetchAgentData = () => __async(void 0, null, function* () {
|
|
2953
2972
|
try {
|
|
2954
|
-
const fetchUrl = `https://api.llmasaservice.io/agents/${agent}`;
|
|
2973
|
+
const fetchUrl = url.endsWith("dev") ? `https://8ftw8droff.execute-api.us-east-1.amazonaws.com/dev/agents/${agent}` : `https://api.llmasaservice.io/agents/${agent}`;
|
|
2955
2974
|
const response = yield fetch(fetchUrl, {
|
|
2956
2975
|
method: "GET",
|
|
2957
2976
|
headers: {
|
|
@@ -3059,10 +3078,11 @@ var AgentPanel = ({
|
|
|
3059
3078
|
var AgentPanel_default = AgentPanel;
|
|
3060
3079
|
|
|
3061
3080
|
// src/AIAgentPanel.tsx
|
|
3062
|
-
var
|
|
3081
|
+
var import_react14 = __toESM(require("react"));
|
|
3063
3082
|
|
|
3064
3083
|
// src/AIChatPanel.tsx
|
|
3065
|
-
var
|
|
3084
|
+
var import_react12 = __toESM(require("react"));
|
|
3085
|
+
var import_server2 = __toESM(require("react-dom/server"));
|
|
3066
3086
|
var import_llmasaservice_client2 = require("llmasaservice-client");
|
|
3067
3087
|
var import_react_markdown2 = __toESM(require("react-markdown"));
|
|
3068
3088
|
var import_remark_gfm2 = __toESM(require("remark-gfm"));
|
|
@@ -3404,19 +3424,69 @@ var DialogFooter = ({
|
|
|
3404
3424
|
return /* @__PURE__ */ import_react10.default.createElement("div", { className: `ai-dialog-footer ${className}` }, children);
|
|
3405
3425
|
};
|
|
3406
3426
|
|
|
3427
|
+
// src/components/ui/ToolInfoModal.tsx
|
|
3428
|
+
var import_react11 = __toESM(require("react"));
|
|
3429
|
+
var ToolInfoModal2 = ({
|
|
3430
|
+
isOpen,
|
|
3431
|
+
onClose,
|
|
3432
|
+
data
|
|
3433
|
+
}) => {
|
|
3434
|
+
if (!isOpen || !data) return null;
|
|
3435
|
+
return /* @__PURE__ */ import_react11.default.createElement("div", { className: "ai-chat-modal-overlay", onClick: onClose }, /* @__PURE__ */ import_react11.default.createElement(
|
|
3436
|
+
"div",
|
|
3437
|
+
{
|
|
3438
|
+
className: "ai-chat-modal-content ai-chat-tool-info-modal",
|
|
3439
|
+
onClick: (e) => e.stopPropagation()
|
|
3440
|
+
},
|
|
3441
|
+
/* @__PURE__ */ import_react11.default.createElement("div", { className: "ai-chat-modal-header" }, /* @__PURE__ */ import_react11.default.createElement("h3", null, "Tool Information"), /* @__PURE__ */ import_react11.default.createElement(
|
|
3442
|
+
"button",
|
|
3443
|
+
{
|
|
3444
|
+
className: "ai-chat-modal-close",
|
|
3445
|
+
onClick: onClose,
|
|
3446
|
+
"aria-label": "Close"
|
|
3447
|
+
},
|
|
3448
|
+
"\xD7"
|
|
3449
|
+
)),
|
|
3450
|
+
/* @__PURE__ */ import_react11.default.createElement("div", { className: "ai-chat-modal-body ai-chat-tool-info-container" }, /* @__PURE__ */ import_react11.default.createElement("div", { className: "ai-chat-tool-info-section" }, /* @__PURE__ */ import_react11.default.createElement("h4", null, "Tool Calls"), /* @__PURE__ */ import_react11.default.createElement(
|
|
3451
|
+
"textarea",
|
|
3452
|
+
{
|
|
3453
|
+
className: "ai-chat-tool-info-json",
|
|
3454
|
+
readOnly: true,
|
|
3455
|
+
value: JSON.stringify(data.calls, null, 2)
|
|
3456
|
+
}
|
|
3457
|
+
)), /* @__PURE__ */ import_react11.default.createElement("div", { className: "ai-chat-tool-info-section" }, /* @__PURE__ */ import_react11.default.createElement("h4", null, "Tool Responses"), /* @__PURE__ */ import_react11.default.createElement(
|
|
3458
|
+
"textarea",
|
|
3459
|
+
{
|
|
3460
|
+
className: "ai-chat-tool-info-json",
|
|
3461
|
+
readOnly: true,
|
|
3462
|
+
value: JSON.stringify(data.responses, null, 2)
|
|
3463
|
+
}
|
|
3464
|
+
))),
|
|
3465
|
+
/* @__PURE__ */ import_react11.default.createElement("div", { className: "ai-chat-modal-footer" }, /* @__PURE__ */ import_react11.default.createElement(
|
|
3466
|
+
"button",
|
|
3467
|
+
{
|
|
3468
|
+
className: "ai-chat-modal-button ai-chat-modal-button--primary",
|
|
3469
|
+
onClick: onClose
|
|
3470
|
+
},
|
|
3471
|
+
"Close"
|
|
3472
|
+
))
|
|
3473
|
+
));
|
|
3474
|
+
};
|
|
3475
|
+
var ToolInfoModal_default2 = ToolInfoModal2;
|
|
3476
|
+
|
|
3407
3477
|
// src/AIChatPanel.tsx
|
|
3408
|
-
var ArrowUpIcon = () => /* @__PURE__ */
|
|
3409
|
-
var StopIcon = () => /* @__PURE__ */
|
|
3410
|
-
var ChevronDownIcon = () => /* @__PURE__ */
|
|
3411
|
-
var ChevronUpIcon = () => /* @__PURE__ */
|
|
3412
|
-
var AgentIcon = () => /* @__PURE__ */
|
|
3413
|
-
var CheckIcon = () => /* @__PURE__ */
|
|
3414
|
-
var BrainIcon = () => /* @__PURE__ */
|
|
3415
|
-
var SearchIcon = () => /* @__PURE__ */
|
|
3416
|
-
var LLMAsAServiceLogo = () => /* @__PURE__ */
|
|
3417
|
-
var AlertCircleIcon = () => /* @__PURE__ */
|
|
3418
|
-
var CloseIcon = () => /* @__PURE__ */
|
|
3419
|
-
var ChatInput =
|
|
3478
|
+
var ArrowUpIcon = () => /* @__PURE__ */ import_react12.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "ai-chat-icon-sm" }, /* @__PURE__ */ import_react12.default.createElement("path", { d: "M12 19V5M5 12l7-7 7 7" }));
|
|
3479
|
+
var StopIcon = () => /* @__PURE__ */ import_react12.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", className: "ai-chat-icon" }, /* @__PURE__ */ import_react12.default.createElement("rect", { x: "6", y: "6", width: "12", height: "12", rx: "2" }));
|
|
3480
|
+
var ChevronDownIcon = () => /* @__PURE__ */ import_react12.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "ai-chat-icon-sm" }, /* @__PURE__ */ import_react12.default.createElement("path", { d: "m6 9 6 6 6-6" }));
|
|
3481
|
+
var ChevronUpIcon = () => /* @__PURE__ */ import_react12.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "ai-chat-icon-sm" }, /* @__PURE__ */ import_react12.default.createElement("path", { d: "m18 15-6-6-6 6" }));
|
|
3482
|
+
var AgentIcon = () => /* @__PURE__ */ import_react12.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "ai-chat-icon-sm" }, /* @__PURE__ */ import_react12.default.createElement("path", { d: "M12 8V4H8" }), /* @__PURE__ */ import_react12.default.createElement("rect", { width: "16", height: "12", x: "4", y: "8", rx: "2" }), /* @__PURE__ */ import_react12.default.createElement("path", { d: "M2 14h2" }), /* @__PURE__ */ import_react12.default.createElement("path", { d: "M20 14h2" }), /* @__PURE__ */ import_react12.default.createElement("path", { d: "M15 13v2" }), /* @__PURE__ */ import_react12.default.createElement("path", { d: "M9 13v2" }));
|
|
3483
|
+
var CheckIcon = () => /* @__PURE__ */ import_react12.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "ai-chat-icon-sm" }, /* @__PURE__ */ import_react12.default.createElement("polyline", { points: "20 6 9 17 4 12" }));
|
|
3484
|
+
var BrainIcon = () => /* @__PURE__ */ import_react12.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "ai-chat-icon-sm" }, /* @__PURE__ */ import_react12.default.createElement("path", { d: "M9.5 2A2.5 2.5 0 0 1 12 4.5v15a2.5 2.5 0 0 1-4.96.44 2.5 2.5 0 0 1-2.96-3.08 3 3 0 0 1-.34-5.58 2.5 2.5 0 0 1 1.32-4.24 2.5 2.5 0 0 1 1.98-3A2.5 2.5 0 0 1 9.5 2Z" }), /* @__PURE__ */ import_react12.default.createElement("path", { d: "M14.5 2A2.5 2.5 0 0 0 12 4.5v15a2.5 2.5 0 0 0 4.96.44 2.5 2.5 0 0 0 2.96-3.08 3 3 0 0 0 .34-5.58 2.5 2.5 0 0 0-1.32-4.24 2.5 2.5 0 0 0-1.98-3A2.5 2.5 0 0 0 14.5 2Z" }));
|
|
3485
|
+
var SearchIcon = () => /* @__PURE__ */ import_react12.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "ai-chat-icon-sm" }, /* @__PURE__ */ import_react12.default.createElement("circle", { cx: "11", cy: "11", r: "8" }), /* @__PURE__ */ import_react12.default.createElement("path", { d: "m21 21-4.3-4.3" }));
|
|
3486
|
+
var LLMAsAServiceLogo = () => /* @__PURE__ */ import_react12.default.createElement("svg", { width: "16", height: "16", viewBox: "0 0 72 72", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ import_react12.default.createElement("ellipse", { cx: "14.0868", cy: "59.2146", rx: "7.8261", ry: "7.7854", fill: "#2487D8" }), /* @__PURE__ */ import_react12.default.createElement("ellipse", { cx: "24.9013", cy: "43.0776", rx: "6.11858", ry: "6.08676", fill: "#2487D8" }), /* @__PURE__ */ import_react12.default.createElement("ellipse", { cx: "45.391", cy: "43.0776", rx: "6.11858", ry: "6.08676", fill: "#2487D8" }), /* @__PURE__ */ import_react12.default.createElement("ellipse", { cx: "65.8813", cy: "43.0776", rx: "6.11858", ry: "6.08676", fill: "#2487D8" }), /* @__PURE__ */ import_react12.default.createElement("ellipse", { cx: "35.1461", cy: "26.5327", rx: "4.41103", ry: "4.3878", fill: "#2487D8" }), /* @__PURE__ */ import_react12.default.createElement("ellipse", { cx: "55.6364", cy: "26.5327", rx: "4.41103", ry: "4.3878", fill: "#2487D8" }), /* @__PURE__ */ import_react12.default.createElement("ellipse", { cx: "45.391", cy: "10.3959", rx: "2.70351", ry: "2.68919", fill: "#2487D8" }));
|
|
3487
|
+
var AlertCircleIcon = () => /* @__PURE__ */ import_react12.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "ai-chat-icon-sm" }, /* @__PURE__ */ import_react12.default.createElement("circle", { cx: "12", cy: "12", r: "10" }), /* @__PURE__ */ import_react12.default.createElement("line", { x1: "12", x2: "12", y1: "8", y2: "12" }), /* @__PURE__ */ import_react12.default.createElement("line", { x1: "12", x2: "12.01", y1: "16", y2: "16" }));
|
|
3488
|
+
var CloseIcon = () => /* @__PURE__ */ import_react12.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "ai-chat-icon-sm" }, /* @__PURE__ */ import_react12.default.createElement("line", { x1: "18", x2: "6", y1: "6", y2: "18" }), /* @__PURE__ */ import_react12.default.createElement("line", { x1: "6", x2: "18", y1: "6", y2: "18" }));
|
|
3489
|
+
var ChatInput = import_react12.default.memo(({
|
|
3420
3490
|
placeholder,
|
|
3421
3491
|
idle,
|
|
3422
3492
|
onSubmit,
|
|
@@ -3432,21 +3502,21 @@ var ChatInput = import_react11.default.memo(({
|
|
|
3432
3502
|
maxContextTokens = 8e3,
|
|
3433
3503
|
enableContextDetailView = false
|
|
3434
3504
|
}) => {
|
|
3435
|
-
const [inputValue, setInputValue] = (0,
|
|
3436
|
-
const [dropdownOpen, setDropdownOpen] = (0,
|
|
3437
|
-
const [contextViewerOpen, setContextViewerOpen] = (0,
|
|
3438
|
-
const [contextViewMode, setContextViewMode] = (0,
|
|
3439
|
-
const textareaRef = (0,
|
|
3440
|
-
const containerRef = (0,
|
|
3441
|
-
const contextPopoverRef = (0,
|
|
3442
|
-
const autoResize = (0,
|
|
3505
|
+
const [inputValue, setInputValue] = (0, import_react12.useState)("");
|
|
3506
|
+
const [dropdownOpen, setDropdownOpen] = (0, import_react12.useState)(false);
|
|
3507
|
+
const [contextViewerOpen, setContextViewerOpen] = (0, import_react12.useState)(false);
|
|
3508
|
+
const [contextViewMode, setContextViewMode] = (0, import_react12.useState)("summary");
|
|
3509
|
+
const textareaRef = (0, import_react12.useRef)(null);
|
|
3510
|
+
const containerRef = (0, import_react12.useRef)(null);
|
|
3511
|
+
const contextPopoverRef = (0, import_react12.useRef)(null);
|
|
3512
|
+
const autoResize = (0, import_react12.useCallback)(() => {
|
|
3443
3513
|
const textarea = textareaRef.current;
|
|
3444
3514
|
if (textarea) {
|
|
3445
3515
|
textarea.style.height = "auto";
|
|
3446
3516
|
textarea.style.height = `${Math.min(textarea.scrollHeight, 200)}px`;
|
|
3447
3517
|
}
|
|
3448
3518
|
}, []);
|
|
3449
|
-
const handleSubmit = (0,
|
|
3519
|
+
const handleSubmit = (0, import_react12.useCallback)(() => {
|
|
3450
3520
|
const trimmed = inputValue.trim();
|
|
3451
3521
|
if (trimmed && idle) {
|
|
3452
3522
|
onSubmit(trimmed);
|
|
@@ -3456,7 +3526,7 @@ var ChatInput = import_react11.default.memo(({
|
|
|
3456
3526
|
}
|
|
3457
3527
|
}
|
|
3458
3528
|
}, [inputValue, idle, onSubmit]);
|
|
3459
|
-
(0,
|
|
3529
|
+
(0, import_react12.useEffect)(() => {
|
|
3460
3530
|
const handleClickOutside = (event) => {
|
|
3461
3531
|
if (containerRef.current && !containerRef.current.contains(event.target)) {
|
|
3462
3532
|
setDropdownOpen(false);
|
|
@@ -3467,7 +3537,7 @@ var ChatInput = import_react11.default.memo(({
|
|
|
3467
3537
|
return () => document.removeEventListener("mousedown", handleClickOutside);
|
|
3468
3538
|
}
|
|
3469
3539
|
}, [dropdownOpen]);
|
|
3470
|
-
(0,
|
|
3540
|
+
(0, import_react12.useEffect)(() => {
|
|
3471
3541
|
const handleClickOutside = (event) => {
|
|
3472
3542
|
if (contextPopoverRef.current && !contextPopoverRef.current.contains(event.target)) {
|
|
3473
3543
|
setContextViewerOpen(false);
|
|
@@ -3499,13 +3569,13 @@ var ChatInput = import_react11.default.memo(({
|
|
|
3499
3569
|
if (typeof data === "string") return data;
|
|
3500
3570
|
return JSON.stringify(data, null, 2);
|
|
3501
3571
|
};
|
|
3502
|
-
return /* @__PURE__ */
|
|
3572
|
+
return /* @__PURE__ */ import_react12.default.createElement(
|
|
3503
3573
|
"div",
|
|
3504
3574
|
{
|
|
3505
3575
|
className: `ai-chat-panel__input-container ${dropdownOpen ? "ai-chat-panel__input-container--dropdown-open" : ""}`,
|
|
3506
3576
|
ref: containerRef
|
|
3507
3577
|
},
|
|
3508
|
-
/* @__PURE__ */
|
|
3578
|
+
/* @__PURE__ */ import_react12.default.createElement("div", { className: "ai-chat-panel__input" }, /* @__PURE__ */ import_react12.default.createElement(
|
|
3509
3579
|
"textarea",
|
|
3510
3580
|
{
|
|
3511
3581
|
ref: textareaRef,
|
|
@@ -3525,24 +3595,24 @@ var ChatInput = import_react11.default.memo(({
|
|
|
3525
3595
|
rows: 1
|
|
3526
3596
|
}
|
|
3527
3597
|
)),
|
|
3528
|
-
/* @__PURE__ */
|
|
3598
|
+
/* @__PURE__ */ import_react12.default.createElement("div", { className: "ai-chat-panel__input-footer" }, agentOptions.length > 0 ? /* @__PURE__ */ import_react12.default.createElement("div", { className: "ai-chat-agent-selector" }, /* @__PURE__ */ import_react12.default.createElement(
|
|
3529
3599
|
"button",
|
|
3530
3600
|
{
|
|
3531
3601
|
className: "ai-chat-agent-selector__trigger",
|
|
3532
3602
|
onClick: () => setDropdownOpen(!dropdownOpen),
|
|
3533
3603
|
disabled: agentsLoading
|
|
3534
3604
|
},
|
|
3535
|
-
currentAgentAvatarUrl ? /* @__PURE__ */
|
|
3605
|
+
currentAgentAvatarUrl ? /* @__PURE__ */ import_react12.default.createElement(
|
|
3536
3606
|
"img",
|
|
3537
3607
|
{
|
|
3538
3608
|
src: currentAgentAvatarUrl,
|
|
3539
3609
|
alt: currentAgentLabel || "Agent",
|
|
3540
3610
|
className: "ai-chat-agent-selector__avatar"
|
|
3541
3611
|
}
|
|
3542
|
-
) : /* @__PURE__ */
|
|
3543
|
-
/* @__PURE__ */
|
|
3544
|
-
dropdownOpen ? /* @__PURE__ */
|
|
3545
|
-
)) : /* @__PURE__ */
|
|
3612
|
+
) : /* @__PURE__ */ import_react12.default.createElement(AgentIcon, null),
|
|
3613
|
+
/* @__PURE__ */ import_react12.default.createElement("span", { className: "ai-chat-agent-selector__label" }, agentsLoading ? "Loading..." : currentAgentLabel || "Select agent"),
|
|
3614
|
+
dropdownOpen ? /* @__PURE__ */ import_react12.default.createElement(ChevronUpIcon, null) : /* @__PURE__ */ import_react12.default.createElement(ChevronDownIcon, null)
|
|
3615
|
+
)) : /* @__PURE__ */ import_react12.default.createElement("div", { className: "ai-chat-panel__input-footer-spacer" }), contextSections.length > 0 && /* @__PURE__ */ import_react12.default.createElement("div", { className: "ai-chat-context-pill-wrapper" }, /* @__PURE__ */ import_react12.default.createElement(
|
|
3546
3616
|
"button",
|
|
3547
3617
|
{
|
|
3548
3618
|
className: `ai-chat-context-pill ${contextViewerOpen ? "ai-chat-context-pill--active" : ""} ${isOverLimit ? "ai-chat-context-pill--warning" : ""}`,
|
|
@@ -3558,15 +3628,15 @@ var ChatInput = import_react11.default.memo(({
|
|
|
3558
3628
|
type: "button",
|
|
3559
3629
|
title: "View context"
|
|
3560
3630
|
},
|
|
3561
|
-
/* @__PURE__ */
|
|
3562
|
-
), contextViewerOpen && /* @__PURE__ */
|
|
3631
|
+
/* @__PURE__ */ import_react12.default.createElement("span", { className: "ai-chat-context-pill__label" }, "context: ", contextSections.length, " ", contextSections.length === 1 ? "section" : "sections")
|
|
3632
|
+
), contextViewerOpen && /* @__PURE__ */ import_react12.default.createElement(
|
|
3563
3633
|
"div",
|
|
3564
3634
|
{
|
|
3565
3635
|
className: `ai-chat-context-popover ${contextViewMode === "detail" ? "ai-chat-context-popover--detail" : ""}`,
|
|
3566
3636
|
ref: contextPopoverRef,
|
|
3567
3637
|
onClick: (e) => e.stopPropagation()
|
|
3568
3638
|
},
|
|
3569
|
-
contextViewMode === "summary" && /* @__PURE__ */
|
|
3639
|
+
contextViewMode === "summary" && /* @__PURE__ */ import_react12.default.createElement("div", { className: "ai-chat-context-popover__summary" }, /* @__PURE__ */ import_react12.default.createElement("div", { className: "ai-chat-context-popover__header" }, /* @__PURE__ */ import_react12.default.createElement("span", { className: "ai-chat-context-popover__title" }, "Context"), /* @__PURE__ */ import_react12.default.createElement(
|
|
3570
3640
|
"button",
|
|
3571
3641
|
{
|
|
3572
3642
|
className: "ai-chat-context-popover__close",
|
|
@@ -3574,13 +3644,13 @@ var ChatInput = import_react11.default.memo(({
|
|
|
3574
3644
|
type: "button"
|
|
3575
3645
|
},
|
|
3576
3646
|
"\xD7"
|
|
3577
|
-
)), /* @__PURE__ */
|
|
3647
|
+
)), /* @__PURE__ */ import_react12.default.createElement("div", { className: "ai-chat-context-popover__token-bar" }, /* @__PURE__ */ import_react12.default.createElement("div", { className: "ai-chat-context-popover__token-info" }, /* @__PURE__ */ import_react12.default.createElement("span", { className: isOverLimit ? "ai-chat-context-popover__tokens--warning" : "" }, formatTokens(totalContextTokens), " tokens"), /* @__PURE__ */ import_react12.default.createElement("span", { className: "ai-chat-context-popover__token-limit" }, "/ ", formatTokens(maxContextTokens), " limit")), /* @__PURE__ */ import_react12.default.createElement("div", { className: "ai-chat-context-popover__progress" }, /* @__PURE__ */ import_react12.default.createElement(
|
|
3578
3648
|
"div",
|
|
3579
3649
|
{
|
|
3580
3650
|
className: `ai-chat-context-popover__progress-bar ${isOverLimit ? "ai-chat-context-popover__progress-bar--warning" : ""}`,
|
|
3581
3651
|
style: { width: `${Math.min(tokenPercentage, 100)}%` }
|
|
3582
3652
|
}
|
|
3583
|
-
))), /* @__PURE__ */
|
|
3653
|
+
))), /* @__PURE__ */ import_react12.default.createElement("div", { className: "ai-chat-context-popover__sections" }, contextSections.map((section) => /* @__PURE__ */ import_react12.default.createElement(
|
|
3584
3654
|
"div",
|
|
3585
3655
|
{
|
|
3586
3656
|
key: section.id,
|
|
@@ -3591,10 +3661,10 @@ var ChatInput = import_react11.default.memo(({
|
|
|
3591
3661
|
}
|
|
3592
3662
|
}
|
|
3593
3663
|
},
|
|
3594
|
-
/* @__PURE__ */
|
|
3595
|
-
/* @__PURE__ */
|
|
3596
|
-
/* @__PURE__ */
|
|
3597
|
-
))), enableContextDetailView && /* @__PURE__ */
|
|
3664
|
+
/* @__PURE__ */ import_react12.default.createElement("span", { className: "ai-chat-context-popover__section-icon" }, "\u{1F4C4}"),
|
|
3665
|
+
/* @__PURE__ */ import_react12.default.createElement("span", { className: "ai-chat-context-popover__section-title" }, section.title),
|
|
3666
|
+
/* @__PURE__ */ import_react12.default.createElement("span", { className: "ai-chat-context-popover__section-tokens" }, section.tokens || Math.ceil(JSON.stringify(section.data).length / 4))
|
|
3667
|
+
))), enableContextDetailView && /* @__PURE__ */ import_react12.default.createElement(
|
|
3598
3668
|
"button",
|
|
3599
3669
|
{
|
|
3600
3670
|
className: "ai-chat-context-popover__expand-btn",
|
|
@@ -3603,7 +3673,7 @@ var ChatInput = import_react11.default.memo(({
|
|
|
3603
3673
|
},
|
|
3604
3674
|
"View details \u2192"
|
|
3605
3675
|
)),
|
|
3606
|
-
contextViewMode === "detail" && enableContextDetailView && /* @__PURE__ */
|
|
3676
|
+
contextViewMode === "detail" && enableContextDetailView && /* @__PURE__ */ import_react12.default.createElement("div", { className: "ai-chat-context-popover__detail" }, /* @__PURE__ */ import_react12.default.createElement("div", { className: "ai-chat-context-popover__header" }, /* @__PURE__ */ import_react12.default.createElement(
|
|
3607
3677
|
"button",
|
|
3608
3678
|
{
|
|
3609
3679
|
className: "ai-chat-context-popover__back",
|
|
@@ -3611,7 +3681,7 @@ var ChatInput = import_react11.default.memo(({
|
|
|
3611
3681
|
type: "button"
|
|
3612
3682
|
},
|
|
3613
3683
|
"\u2190 Back"
|
|
3614
|
-
), /* @__PURE__ */
|
|
3684
|
+
), /* @__PURE__ */ import_react12.default.createElement("span", { className: "ai-chat-context-popover__title" }, "Context Details"), /* @__PURE__ */ import_react12.default.createElement(
|
|
3615
3685
|
"button",
|
|
3616
3686
|
{
|
|
3617
3687
|
className: "ai-chat-context-popover__close",
|
|
@@ -3619,26 +3689,26 @@ var ChatInput = import_react11.default.memo(({
|
|
|
3619
3689
|
type: "button"
|
|
3620
3690
|
},
|
|
3621
3691
|
"\xD7"
|
|
3622
|
-
)), /* @__PURE__ */
|
|
3692
|
+
)), /* @__PURE__ */ import_react12.default.createElement("div", { className: "ai-chat-context-popover__token-bar" }, /* @__PURE__ */ import_react12.default.createElement("div", { className: "ai-chat-context-popover__token-info" }, /* @__PURE__ */ import_react12.default.createElement("span", { className: isOverLimit ? "ai-chat-context-popover__tokens--warning" : "" }, formatTokens(totalContextTokens), " tokens"), /* @__PURE__ */ import_react12.default.createElement("span", { className: "ai-chat-context-popover__token-limit" }, "/ ", formatTokens(maxContextTokens), " limit")), /* @__PURE__ */ import_react12.default.createElement("div", { className: "ai-chat-context-popover__progress" }, /* @__PURE__ */ import_react12.default.createElement(
|
|
3623
3693
|
"div",
|
|
3624
3694
|
{
|
|
3625
3695
|
className: `ai-chat-context-popover__progress-bar ${isOverLimit ? "ai-chat-context-popover__progress-bar--warning" : ""}`,
|
|
3626
3696
|
style: { width: `${Math.min(tokenPercentage, 100)}%` }
|
|
3627
3697
|
}
|
|
3628
|
-
))), /* @__PURE__ */
|
|
3698
|
+
))), /* @__PURE__ */ import_react12.default.createElement("div", { className: "ai-chat-context-popover__detail-sections" }, contextSections.map((section) => {
|
|
3629
3699
|
const format = detectFormat(section.data);
|
|
3630
|
-
return /* @__PURE__ */
|
|
3700
|
+
return /* @__PURE__ */ import_react12.default.createElement("details", { key: section.id, className: "ai-chat-context-popover__detail-section", open: true }, /* @__PURE__ */ import_react12.default.createElement("summary", { className: "ai-chat-context-popover__detail-section-header" }, /* @__PURE__ */ import_react12.default.createElement("span", { className: "ai-chat-context-popover__detail-section-title" }, section.title), /* @__PURE__ */ import_react12.default.createElement("span", { className: "ai-chat-context-popover__detail-section-meta" }, /* @__PURE__ */ import_react12.default.createElement("code", null, `{{${section.id}}}`), /* @__PURE__ */ import_react12.default.createElement("span", null, "~", section.tokens || Math.ceil(JSON.stringify(section.data).length / 4)))), /* @__PURE__ */ import_react12.default.createElement("pre", { className: "ai-chat-context-popover__detail-content" }, /* @__PURE__ */ import_react12.default.createElement("code", null, formatContent(section.data, format))));
|
|
3631
3701
|
})))
|
|
3632
|
-
)), /* @__PURE__ */
|
|
3702
|
+
)), /* @__PURE__ */ import_react12.default.createElement(
|
|
3633
3703
|
"button",
|
|
3634
3704
|
{
|
|
3635
3705
|
className: `ai-chat-send-button ${idle && !inputValue.trim() ? "ai-chat-send-button--disabled" : ""} ${!idle ? "ai-chat-send-button--stop" : ""}`,
|
|
3636
3706
|
onClick: () => idle ? handleSubmit() : onStop(),
|
|
3637
3707
|
disabled: idle && !inputValue.trim()
|
|
3638
3708
|
},
|
|
3639
|
-
idle ? /* @__PURE__ */
|
|
3709
|
+
idle ? /* @__PURE__ */ import_react12.default.createElement(ArrowUpIcon, null) : /* @__PURE__ */ import_react12.default.createElement(StopIcon, null)
|
|
3640
3710
|
)),
|
|
3641
|
-
agentOptions.length > 0 && dropdownOpen && /* @__PURE__ */
|
|
3711
|
+
agentOptions.length > 0 && dropdownOpen && /* @__PURE__ */ import_react12.default.createElement("div", { className: "ai-chat-agent-selector__dropdown-inside" }, agentOptions.map((option) => /* @__PURE__ */ import_react12.default.createElement(
|
|
3642
3712
|
"button",
|
|
3643
3713
|
{
|
|
3644
3714
|
key: option.value,
|
|
@@ -3650,16 +3720,16 @@ var ChatInput = import_react11.default.memo(({
|
|
|
3650
3720
|
setDropdownOpen(false);
|
|
3651
3721
|
}
|
|
3652
3722
|
},
|
|
3653
|
-
option.avatarUrl ? /* @__PURE__ */
|
|
3723
|
+
option.avatarUrl ? /* @__PURE__ */ import_react12.default.createElement(
|
|
3654
3724
|
"img",
|
|
3655
3725
|
{
|
|
3656
3726
|
src: option.avatarUrl,
|
|
3657
3727
|
alt: option.label,
|
|
3658
3728
|
className: "ai-chat-agent-selector__option-avatar"
|
|
3659
3729
|
}
|
|
3660
|
-
) : option.icon ? /* @__PURE__ */
|
|
3661
|
-
/* @__PURE__ */
|
|
3662
|
-
option.value === currentAgentId && /* @__PURE__ */
|
|
3730
|
+
) : option.icon ? /* @__PURE__ */ import_react12.default.createElement("span", { className: "ai-chat-agent-selector__option-icon" }, option.icon) : null,
|
|
3731
|
+
/* @__PURE__ */ import_react12.default.createElement("span", { className: "ai-chat-agent-selector__option-content" }, /* @__PURE__ */ import_react12.default.createElement("span", { className: "ai-chat-agent-selector__option-label" }, option.label), option.description && /* @__PURE__ */ import_react12.default.createElement("span", { className: "ai-chat-agent-selector__option-description" }, option.description)),
|
|
3732
|
+
option.value === currentAgentId && /* @__PURE__ */ import_react12.default.createElement("span", { className: "ai-chat-agent-selector__option-check" }, /* @__PURE__ */ import_react12.default.createElement(CheckIcon, null))
|
|
3663
3733
|
)))
|
|
3664
3734
|
);
|
|
3665
3735
|
});
|
|
@@ -3703,35 +3773,77 @@ var AIChatPanel = ({
|
|
|
3703
3773
|
totalContextTokens = 0,
|
|
3704
3774
|
maxContextTokens = 8e3,
|
|
3705
3775
|
enableContextDetailView = false,
|
|
3706
|
-
onConversationCreated
|
|
3776
|
+
onConversationCreated,
|
|
3777
|
+
// UI Customization Props
|
|
3778
|
+
cssUrl,
|
|
3779
|
+
markdownClass,
|
|
3780
|
+
width,
|
|
3781
|
+
height,
|
|
3782
|
+
scrollToEnd = false,
|
|
3783
|
+
prismStyle,
|
|
3784
|
+
// Email & Save Props
|
|
3785
|
+
showSaveButton = true,
|
|
3786
|
+
showEmailButton = true,
|
|
3787
|
+
messages = [],
|
|
3788
|
+
// Call-to-Action Props
|
|
3789
|
+
showCallToAction = false,
|
|
3790
|
+
callToActionButtonText = "Submit",
|
|
3791
|
+
callToActionEmailAddress = "",
|
|
3792
|
+
callToActionEmailSubject = "Agent CTA submitted",
|
|
3793
|
+
// Customer Email Capture Props
|
|
3794
|
+
customerEmailCaptureMode = "HIDE",
|
|
3795
|
+
customerEmailCapturePlaceholder = "Please enter your email..."
|
|
3707
3796
|
}) => {
|
|
3797
|
+
var _a;
|
|
3708
3798
|
const publicAPIUrl = "https://api.llmasaservice.io";
|
|
3709
|
-
const [lastController, setLastController] = (0,
|
|
3710
|
-
const [lastMessages, setLastMessages] = (0,
|
|
3711
|
-
const [history, setHistory] = (0,
|
|
3712
|
-
const [isLoading, setIsLoading] = (0,
|
|
3713
|
-
const [lastPrompt, setLastPrompt] = (0,
|
|
3714
|
-
const [lastKey, setLastKey] = (0,
|
|
3715
|
-
const [currentConversation, setCurrentConversation] = (0,
|
|
3716
|
-
const [followOnQuestionsState, setFollowOnQuestionsState] = (0,
|
|
3717
|
-
const [thinkingBlocks, setThinkingBlocks] = (0,
|
|
3718
|
-
const [currentThinkingIndex, setCurrentThinkingIndex] = (0,
|
|
3719
|
-
const [newConversationConfirm, setNewConversationConfirm] = (0,
|
|
3720
|
-
const [justReset, setJustReset] = (0,
|
|
3721
|
-
const [copiedCallId, setCopiedCallId] = (0,
|
|
3722
|
-
const [feedbackCallId, setFeedbackCallId] = (0,
|
|
3723
|
-
const [error, setError] = (0,
|
|
3724
|
-
const
|
|
3725
|
-
const
|
|
3726
|
-
const [
|
|
3727
|
-
const
|
|
3728
|
-
const
|
|
3729
|
-
const
|
|
3730
|
-
const
|
|
3731
|
-
const
|
|
3732
|
-
const
|
|
3733
|
-
const
|
|
3734
|
-
(0,
|
|
3799
|
+
const [lastController, setLastController] = (0, import_react12.useState)(new AbortController());
|
|
3800
|
+
const [lastMessages, setLastMessages] = (0, import_react12.useState)([]);
|
|
3801
|
+
const [history, setHistory] = (0, import_react12.useState)(initialHistory);
|
|
3802
|
+
const [isLoading, setIsLoading] = (0, import_react12.useState)(false);
|
|
3803
|
+
const [lastPrompt, setLastPrompt] = (0, import_react12.useState)(null);
|
|
3804
|
+
const [lastKey, setLastKey] = (0, import_react12.useState)(null);
|
|
3805
|
+
const [currentConversation, setCurrentConversation] = (0, import_react12.useState)(conversation);
|
|
3806
|
+
const [followOnQuestionsState, setFollowOnQuestionsState] = (0, import_react12.useState)(followOnQuestions);
|
|
3807
|
+
const [thinkingBlocks, setThinkingBlocks] = (0, import_react12.useState)([]);
|
|
3808
|
+
const [currentThinkingIndex, setCurrentThinkingIndex] = (0, import_react12.useState)(0);
|
|
3809
|
+
const [newConversationConfirm, setNewConversationConfirm] = (0, import_react12.useState)(false);
|
|
3810
|
+
const [justReset, setJustReset] = (0, import_react12.useState)(false);
|
|
3811
|
+
const [copiedCallId, setCopiedCallId] = (0, import_react12.useState)(null);
|
|
3812
|
+
const [feedbackCallId, setFeedbackCallId] = (0, import_react12.useState)(null);
|
|
3813
|
+
const [error, setError] = (0, import_react12.useState)(null);
|
|
3814
|
+
const [emailSent, setEmailSent] = (0, import_react12.useState)(false);
|
|
3815
|
+
const [isToolInfoModalOpen, setIsToolInfoModalOpen] = (0, import_react12.useState)(false);
|
|
3816
|
+
const [toolInfoData, setToolInfoData] = (0, import_react12.useState)(null);
|
|
3817
|
+
const [callToActionSent, setCallToActionSent] = (0, import_react12.useState)(false);
|
|
3818
|
+
const [CTAClickedButNoEmail, setCTAClickedButNoEmail] = (0, import_react12.useState)(false);
|
|
3819
|
+
const [emailInput, setEmailInput] = (0, import_react12.useState)((_a = customer == null ? void 0 : customer.customer_user_email) != null ? _a : "");
|
|
3820
|
+
const [emailInputSet, setEmailInputSet] = (0, import_react12.useState)(false);
|
|
3821
|
+
const [emailValid, setEmailValid] = (0, import_react12.useState)(true);
|
|
3822
|
+
const [showEmailPanel, setShowEmailPanel] = (0, import_react12.useState)(customerEmailCaptureMode !== "HIDE");
|
|
3823
|
+
const [emailClickedButNoEmail, setEmailClickedButNoEmail] = (0, import_react12.useState)(false);
|
|
3824
|
+
const [pendingToolRequests, setPendingToolRequests] = (0, import_react12.useState)([]);
|
|
3825
|
+
const [sessionApprovedTools, setSessionApprovedTools] = (0, import_react12.useState)([]);
|
|
3826
|
+
const [alwaysApprovedTools, setAlwaysApprovedTools] = (0, import_react12.useState)([]);
|
|
3827
|
+
(0, import_react12.useEffect)(() => {
|
|
3828
|
+
setShowEmailPanel(customerEmailCaptureMode !== "HIDE");
|
|
3829
|
+
if (customerEmailCaptureMode === "REQUIRED") {
|
|
3830
|
+
if (!isEmailAddress(emailInput)) {
|
|
3831
|
+
setEmailValid(false);
|
|
3832
|
+
}
|
|
3833
|
+
}
|
|
3834
|
+
}, [customerEmailCaptureMode, emailInput]);
|
|
3835
|
+
const bottomRef = (0, import_react12.useRef)(null);
|
|
3836
|
+
const responseAreaRef = (0, import_react12.useRef)(null);
|
|
3837
|
+
const [userHasScrolled, setUserHasScrolled] = (0, import_react12.useState)(false);
|
|
3838
|
+
const lastScrollTopRef = (0, import_react12.useRef)(0);
|
|
3839
|
+
const scrollRAFRef = (0, import_react12.useRef)(null);
|
|
3840
|
+
const lastScrollTimeRef = (0, import_react12.useRef)(0);
|
|
3841
|
+
const prevIdleRef = (0, import_react12.useRef)(true);
|
|
3842
|
+
const hasNotifiedCompletionRef = (0, import_react12.useRef)(true);
|
|
3843
|
+
const latestHistoryRef = (0, import_react12.useRef)(initialHistory);
|
|
3844
|
+
const initialPromptSentRef = (0, import_react12.useRef)(false);
|
|
3845
|
+
const lastFollowOnPromptRef = (0, import_react12.useRef)("");
|
|
3846
|
+
(0, import_react12.useEffect)(() => {
|
|
3735
3847
|
if (!initialHistory) return;
|
|
3736
3848
|
setHistory((prev) => {
|
|
3737
3849
|
const currentKeys = Object.keys(prev);
|
|
@@ -3765,23 +3877,23 @@ var AIChatPanel = ({
|
|
|
3765
3877
|
const toolList = llmResult.toolList || [];
|
|
3766
3878
|
const toolsLoading = llmResult.toolsLoading || false;
|
|
3767
3879
|
const toolsFetchError = llmResult.toolsFetchError || null;
|
|
3768
|
-
const historyCallbackRef = (0,
|
|
3769
|
-
const responseCompleteCallbackRef = (0,
|
|
3770
|
-
const responseRef = (0,
|
|
3771
|
-
const lastKeyRef = (0,
|
|
3772
|
-
const lastCallIdRef = (0,
|
|
3773
|
-
const lastPromptRef = (0,
|
|
3880
|
+
const historyCallbackRef = (0, import_react12.useRef)(historyChangedCallback);
|
|
3881
|
+
const responseCompleteCallbackRef = (0, import_react12.useRef)(responseCompleteCallback);
|
|
3882
|
+
const responseRef = (0, import_react12.useRef)(response);
|
|
3883
|
+
const lastKeyRef = (0, import_react12.useRef)(lastKey);
|
|
3884
|
+
const lastCallIdRef = (0, import_react12.useRef)(lastCallId);
|
|
3885
|
+
const lastPromptRef = (0, import_react12.useRef)(lastPrompt);
|
|
3774
3886
|
historyCallbackRef.current = historyChangedCallback;
|
|
3775
3887
|
responseCompleteCallbackRef.current = responseCompleteCallback;
|
|
3776
3888
|
responseRef.current = response;
|
|
3777
3889
|
lastKeyRef.current = lastKey;
|
|
3778
3890
|
lastCallIdRef.current = lastCallId;
|
|
3779
3891
|
lastPromptRef.current = lastPrompt;
|
|
3780
|
-
const
|
|
3781
|
-
() => theme === "light" ? import_material_light3.default : import_material_dark3.default,
|
|
3782
|
-
[theme]
|
|
3892
|
+
const effectivePrismStyle = (0, import_react12.useMemo)(
|
|
3893
|
+
() => prismStyle != null ? prismStyle : theme === "light" ? import_material_light3.default : import_material_dark3.default,
|
|
3894
|
+
[prismStyle, theme]
|
|
3783
3895
|
);
|
|
3784
|
-
const browserInfo = (0,
|
|
3896
|
+
const browserInfo = (0, import_react12.useMemo)(() => {
|
|
3785
3897
|
if (typeof window === "undefined") return null;
|
|
3786
3898
|
return {
|
|
3787
3899
|
currentTimeUTC: (/* @__PURE__ */ new Date()).toISOString(),
|
|
@@ -3789,8 +3901,8 @@ var AIChatPanel = ({
|
|
|
3789
3901
|
userLanguage: navigator.language
|
|
3790
3902
|
};
|
|
3791
3903
|
}, []);
|
|
3792
|
-
const ensureConversation = (0,
|
|
3793
|
-
var
|
|
3904
|
+
const ensureConversation = (0, import_react12.useCallback)(() => {
|
|
3905
|
+
var _a2, _b;
|
|
3794
3906
|
console.log("ensureConversation - called with:", {
|
|
3795
3907
|
currentConversation,
|
|
3796
3908
|
createConversationOnFirstChat,
|
|
@@ -3805,7 +3917,7 @@ var AIChatPanel = ({
|
|
|
3805
3917
|
const requestBody = {
|
|
3806
3918
|
project_id,
|
|
3807
3919
|
agentId: agent,
|
|
3808
|
-
customerId: (
|
|
3920
|
+
customerId: (_a2 = customer == null ? void 0 : customer.customer_id) != null ? _a2 : null,
|
|
3809
3921
|
customerEmail: (_b = customer == null ? void 0 : customer.customer_user_email) != null ? _b : null,
|
|
3810
3922
|
timezone: browserInfo == null ? void 0 : browserInfo.userTimezone,
|
|
3811
3923
|
language: browserInfo == null ? void 0 : browserInfo.userLanguage
|
|
@@ -3843,11 +3955,11 @@ var AIChatPanel = ({
|
|
|
3843
3955
|
console.log("ensureConversation - using existing conversation:", currentConversation);
|
|
3844
3956
|
return Promise.resolve(currentConversation);
|
|
3845
3957
|
}, [currentConversation, createConversationOnFirstChat, publicAPIUrl, project_id, agent, customer, browserInfo]);
|
|
3846
|
-
const dataWithExtras = (0,
|
|
3847
|
-
var
|
|
3958
|
+
const dataWithExtras = (0, import_react12.useCallback)(() => {
|
|
3959
|
+
var _a2, _b, _c, _d, _e, _f, _g, _h;
|
|
3848
3960
|
return [
|
|
3849
3961
|
...data,
|
|
3850
|
-
{ key: "--customer_id", data: (
|
|
3962
|
+
{ key: "--customer_id", data: (_a2 = customer == null ? void 0 : customer.customer_id) != null ? _a2 : "" },
|
|
3851
3963
|
{ key: "--customer_name", data: (_b = customer == null ? void 0 : customer.customer_name) != null ? _b : "" },
|
|
3852
3964
|
{ key: "--customer_user_id", data: (_c = customer == null ? void 0 : customer.customer_user_id) != null ? _c : "" },
|
|
3853
3965
|
{ key: "--customer_user_name", data: (_d = customer == null ? void 0 : customer.customer_user_name) != null ? _d : "" },
|
|
@@ -3857,7 +3969,7 @@ var AIChatPanel = ({
|
|
|
3857
3969
|
{ key: "--userLanguage", data: (_h = browserInfo == null ? void 0 : browserInfo.userLanguage) != null ? _h : "" }
|
|
3858
3970
|
];
|
|
3859
3971
|
}, [data, customer, browserInfo]);
|
|
3860
|
-
const currentAgentInfo = (0,
|
|
3972
|
+
const currentAgentInfo = (0, import_react12.useMemo)(() => {
|
|
3861
3973
|
if (!currentAgentId || agentOptions.length === 0) return { label: null, avatarUrl: null };
|
|
3862
3974
|
const currentAgent = agentOptions.find((a) => a.value === currentAgentId);
|
|
3863
3975
|
return {
|
|
@@ -3867,21 +3979,191 @@ var AIChatPanel = ({
|
|
|
3867
3979
|
}, [currentAgentId, agentOptions]);
|
|
3868
3980
|
const currentAgentLabel = currentAgentInfo.label;
|
|
3869
3981
|
const currentAgentAvatarUrl = currentAgentInfo.avatarUrl;
|
|
3870
|
-
const
|
|
3982
|
+
const isEmailAddress = (email) => {
|
|
3983
|
+
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
|
3984
|
+
return emailRegex.test(email);
|
|
3985
|
+
};
|
|
3986
|
+
const convertMarkdownToHTML = (markdown) => {
|
|
3987
|
+
const html = import_server2.default.renderToStaticMarkup(
|
|
3988
|
+
/* @__PURE__ */ import_react12.default.createElement("div", { className: markdownClass }, /* @__PURE__ */ import_react12.default.createElement(
|
|
3989
|
+
import_react_markdown2.default,
|
|
3990
|
+
{
|
|
3991
|
+
remarkPlugins: [import_remark_gfm2.default],
|
|
3992
|
+
rehypePlugins: [import_rehype_raw2.default]
|
|
3993
|
+
},
|
|
3994
|
+
markdown
|
|
3995
|
+
))
|
|
3996
|
+
);
|
|
3997
|
+
return html;
|
|
3998
|
+
};
|
|
3999
|
+
const convertHistoryToHTML = (history2) => {
|
|
4000
|
+
const stylesheet = `
|
|
4001
|
+
<style>
|
|
4002
|
+
.conversation-history {
|
|
4003
|
+
font-family: Arial, sans-serif;
|
|
4004
|
+
line-height: 1.5;
|
|
4005
|
+
}
|
|
4006
|
+
.history-entry {
|
|
4007
|
+
margin-bottom: 15px;
|
|
4008
|
+
}
|
|
4009
|
+
.prompt-container, .response-container {
|
|
4010
|
+
margin-bottom: 10px;
|
|
4011
|
+
}
|
|
4012
|
+
.prompt, .response {
|
|
4013
|
+
display: block;
|
|
4014
|
+
margin: 5px 0;
|
|
4015
|
+
padding: 10px;
|
|
4016
|
+
border-radius: 5px;
|
|
4017
|
+
max-width: 80%;
|
|
4018
|
+
}
|
|
4019
|
+
.prompt {
|
|
4020
|
+
background-color: #efefef;
|
|
4021
|
+
margin-left: 0;
|
|
4022
|
+
}
|
|
4023
|
+
.response {
|
|
4024
|
+
background-color: #f0fcfd;
|
|
4025
|
+
margin-left: 25px;
|
|
4026
|
+
}
|
|
4027
|
+
</style>
|
|
4028
|
+
`;
|
|
4029
|
+
let html = `
|
|
4030
|
+
<html>
|
|
4031
|
+
<head>
|
|
4032
|
+
${stylesheet}
|
|
4033
|
+
</head>
|
|
4034
|
+
<body>
|
|
4035
|
+
<h1>Conversation History (${(/* @__PURE__ */ new Date()).toLocaleString()})</h1>
|
|
4036
|
+
<div class="conversation-history">
|
|
4037
|
+
`;
|
|
4038
|
+
Object.entries(history2).forEach(([prompt, response2], index) => {
|
|
4039
|
+
if (hideInitialPrompt && index === 0) {
|
|
4040
|
+
html += `
|
|
4041
|
+
<div class="history-entry">
|
|
4042
|
+
<div class="response-container">
|
|
4043
|
+
<div class="response">${convertMarkdownToHTML(response2.content)}</div>
|
|
4044
|
+
</div>
|
|
4045
|
+
</div>
|
|
4046
|
+
`;
|
|
4047
|
+
} else {
|
|
4048
|
+
html += `
|
|
4049
|
+
<div class="history-entry">
|
|
4050
|
+
<div class="prompt-container">
|
|
4051
|
+
<div class="prompt">${convertMarkdownToHTML(
|
|
4052
|
+
formatPromptForDisplay(prompt)
|
|
4053
|
+
)}</div>
|
|
4054
|
+
</div>
|
|
4055
|
+
<div class="response-container">
|
|
4056
|
+
<div class="response">${convertMarkdownToHTML(response2.content)}</div>
|
|
4057
|
+
</div>
|
|
4058
|
+
</div>
|
|
4059
|
+
`;
|
|
4060
|
+
}
|
|
4061
|
+
});
|
|
4062
|
+
html += `
|
|
4063
|
+
</div>
|
|
4064
|
+
</body>
|
|
4065
|
+
</html>
|
|
4066
|
+
`;
|
|
4067
|
+
return html;
|
|
4068
|
+
};
|
|
4069
|
+
const saveHTMLToFile = (html, filename) => {
|
|
4070
|
+
const blob = new Blob([html], { type: "text/html" });
|
|
4071
|
+
const link = document.createElement("a");
|
|
4072
|
+
link.href = URL.createObjectURL(blob);
|
|
4073
|
+
link.download = filename;
|
|
4074
|
+
document.body.appendChild(link);
|
|
4075
|
+
link.click();
|
|
4076
|
+
document.body.removeChild(link);
|
|
4077
|
+
};
|
|
4078
|
+
const saveAsHTMLFile = (0, import_react12.useCallback)(() => {
|
|
4079
|
+
saveHTMLToFile(
|
|
4080
|
+
convertHistoryToHTML(history),
|
|
4081
|
+
`conversation-${(/* @__PURE__ */ new Date()).toISOString()}.html`
|
|
4082
|
+
);
|
|
4083
|
+
interactionClicked(lastCallId || "", "save");
|
|
4084
|
+
}, [history, lastCallId]);
|
|
4085
|
+
const handleSendEmail = (to, from) => {
|
|
4086
|
+
sendConversationsViaEmail(to, `Conversation History from ${title}`, from);
|
|
4087
|
+
interactionClicked(lastCallId || "", "email", to);
|
|
4088
|
+
setEmailSent(true);
|
|
4089
|
+
};
|
|
4090
|
+
const sendConversationsViaEmail = (_0, ..._1) => __async(void 0, [_0, ..._1], function* (to, subject = `Conversation History from ${title}`, from = "") {
|
|
4091
|
+
fetch(`${publicAPIUrl}/share/email`, {
|
|
4092
|
+
method: "POST",
|
|
4093
|
+
headers: {
|
|
4094
|
+
"Content-Type": "application/json"
|
|
4095
|
+
},
|
|
4096
|
+
body: JSON.stringify({
|
|
4097
|
+
to,
|
|
4098
|
+
from,
|
|
4099
|
+
subject,
|
|
4100
|
+
html: convertHistoryToHTML(history),
|
|
4101
|
+
project_id: project_id != null ? project_id : "",
|
|
4102
|
+
customer,
|
|
4103
|
+
history,
|
|
4104
|
+
title
|
|
4105
|
+
})
|
|
4106
|
+
});
|
|
4107
|
+
yield interactionClicked(lastCallId || "", "email", from);
|
|
4108
|
+
});
|
|
4109
|
+
const sendCallToActionEmail = (0, import_react12.useCallback)((from) => __async(void 0, null, function* () {
|
|
4110
|
+
try {
|
|
4111
|
+
yield fetch(`${publicAPIUrl}/share/email`, {
|
|
4112
|
+
method: "POST",
|
|
4113
|
+
headers: {
|
|
4114
|
+
"Content-Type": "application/json"
|
|
4115
|
+
},
|
|
4116
|
+
body: JSON.stringify({
|
|
4117
|
+
to: callToActionEmailAddress,
|
|
4118
|
+
from,
|
|
4119
|
+
subject: `${callToActionEmailSubject} from ${from}`,
|
|
4120
|
+
html: convertHistoryToHTML(history),
|
|
4121
|
+
project_id: project_id != null ? project_id : "",
|
|
4122
|
+
customer,
|
|
4123
|
+
history,
|
|
4124
|
+
title
|
|
4125
|
+
})
|
|
4126
|
+
});
|
|
4127
|
+
yield interactionClicked(lastCallId || "", "cta", from);
|
|
4128
|
+
setCallToActionSent(true);
|
|
4129
|
+
} catch (err) {
|
|
4130
|
+
console.error("[AIChatPanel] Failed to send CTA email:", err);
|
|
4131
|
+
}
|
|
4132
|
+
}), [history, title, project_id, customer, lastCallId, publicAPIUrl, callToActionEmailAddress, callToActionEmailSubject]);
|
|
4133
|
+
const isDisabledDueToNoEmail = (0, import_react12.useCallback)(() => {
|
|
4134
|
+
if (customerEmailCaptureMode === "REQUIRED" && !emailInputSet) {
|
|
4135
|
+
return true;
|
|
4136
|
+
}
|
|
4137
|
+
return false;
|
|
4138
|
+
}, [customerEmailCaptureMode, emailInputSet]);
|
|
4139
|
+
const handleToolApproval = (0, import_react12.useCallback)((toolName, scope) => {
|
|
4140
|
+
if (scope === "session" || scope === "always") {
|
|
4141
|
+
setSessionApprovedTools((prev) => Array.from(/* @__PURE__ */ new Set([...prev, toolName])));
|
|
4142
|
+
}
|
|
4143
|
+
if (scope === "always") {
|
|
4144
|
+
setAlwaysApprovedTools((prev) => Array.from(/* @__PURE__ */ new Set([...prev, toolName])));
|
|
4145
|
+
}
|
|
4146
|
+
setPendingToolRequests((prev) => prev.filter((r) => r.toolName !== toolName));
|
|
4147
|
+
console.log(`[AIChatPanel] Tool "${toolName}" approved with scope: ${scope}`);
|
|
4148
|
+
}, []);
|
|
4149
|
+
const getUniqueToolNames = (0, import_react12.useCallback)(() => {
|
|
4150
|
+
return Array.from(new Set(pendingToolRequests.map((r) => r.toolName)));
|
|
4151
|
+
}, [pendingToolRequests]);
|
|
4152
|
+
const cleanContentForDisplay = (0, import_react12.useCallback)((content) => {
|
|
3871
4153
|
let cleaned = content.replace(/\*\*(.*?)\*\*/g, "$1").replace(/\*(.*?)\*/g, "$1").replace(/\n+/g, " ").replace(/\s+/g, " ").trim();
|
|
3872
4154
|
if (cleaned.length > 100) {
|
|
3873
4155
|
cleaned = cleaned.substring(0, 100) + "...";
|
|
3874
4156
|
}
|
|
3875
4157
|
return cleaned || "Thinking";
|
|
3876
4158
|
}, []);
|
|
3877
|
-
const processThinkingTags = (0,
|
|
3878
|
-
var
|
|
4159
|
+
const processThinkingTags = (0, import_react12.useCallback)((text) => {
|
|
4160
|
+
var _a2, _b;
|
|
3879
4161
|
const blocks = [];
|
|
3880
4162
|
let index = 0;
|
|
3881
4163
|
const reasoningRegex = /<reasoning>([\s\S]*?)<\/reasoning>/gi;
|
|
3882
4164
|
let match;
|
|
3883
4165
|
while ((match = reasoningRegex.exec(text)) !== null) {
|
|
3884
|
-
blocks.push({ type: "reasoning", content: (
|
|
4166
|
+
blocks.push({ type: "reasoning", content: (_a2 = match[1]) != null ? _a2 : "", index: index++ });
|
|
3885
4167
|
}
|
|
3886
4168
|
const searchingRegex = /<searching>([\s\S]*?)<\/searching>/gi;
|
|
3887
4169
|
while ((match = searchingRegex.exec(text)) !== null) {
|
|
@@ -3895,7 +4177,7 @@ var AIChatPanel = ({
|
|
|
3895
4177
|
pattern: "\\[SUGGEST_AGENT:([^|\\]]+)\\|([^|\\]]+)\\|([^\\]]+)\\]",
|
|
3896
4178
|
markdown: '<agent-suggestion data-agent-id="$1" data-agent-name="$2" data-reason="$3"></agent-suggestion>'
|
|
3897
4179
|
};
|
|
3898
|
-
const processActions = (0,
|
|
4180
|
+
const processActions = (0, import_react12.useCallback)((content) => {
|
|
3899
4181
|
const allActions = [AGENT_SUGGESTION_ACTION, ...actions || []];
|
|
3900
4182
|
let processed = content;
|
|
3901
4183
|
allActions.forEach((action) => {
|
|
@@ -3910,7 +4192,7 @@ var AIChatPanel = ({
|
|
|
3910
4192
|
});
|
|
3911
4193
|
return processed;
|
|
3912
4194
|
}, [actions]);
|
|
3913
|
-
const formatPromptForDisplay = (0,
|
|
4195
|
+
const formatPromptForDisplay = (0, import_react12.useCallback)((prompt) => {
|
|
3914
4196
|
let displayPrompt = prompt;
|
|
3915
4197
|
const isoTimestampRegex = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z:/;
|
|
3916
4198
|
if (isoTimestampRegex.test(displayPrompt)) {
|
|
@@ -3928,13 +4210,13 @@ var AIChatPanel = ({
|
|
|
3928
4210
|
}
|
|
3929
4211
|
return displayPrompt;
|
|
3930
4212
|
}, [hideRagContextInPrompt]);
|
|
3931
|
-
const interactionClicked = (0,
|
|
3932
|
-
var
|
|
4213
|
+
const interactionClicked = (0, import_react12.useCallback)((callId, action, emailaddress = "", comment = "") => __async(void 0, null, function* () {
|
|
4214
|
+
var _a2, _b;
|
|
3933
4215
|
console.log(`[AIChatPanel] Interaction: ${action} for callId: ${callId}`);
|
|
3934
4216
|
const convId = currentConversation || (yield ensureConversation());
|
|
3935
4217
|
const finalCallId = callId || convId;
|
|
3936
|
-
const
|
|
3937
|
-
const email = emailaddress && emailaddress !== "" ? emailaddress :
|
|
4218
|
+
const isEmailAddress2 = (str) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(str);
|
|
4219
|
+
const email = emailaddress && emailaddress !== "" ? emailaddress : isEmailAddress2((_a2 = customer == null ? void 0 : customer.customer_user_email) != null ? _a2 : "") ? customer == null ? void 0 : customer.customer_user_email : isEmailAddress2((_b = customer == null ? void 0 : customer.customer_id) != null ? _b : "") ? customer == null ? void 0 : customer.customer_id : "";
|
|
3938
4220
|
try {
|
|
3939
4221
|
yield fetch(`${publicAPIUrl}/feedback/${finalCallId}/${action}`, {
|
|
3940
4222
|
method: "POST",
|
|
@@ -3952,7 +4234,7 @@ var AIChatPanel = ({
|
|
|
3952
4234
|
console.error("[AIChatPanel] Failed to send feedback:", err);
|
|
3953
4235
|
}
|
|
3954
4236
|
}), [currentConversation, ensureConversation, customer, project_id, publicAPIUrl]);
|
|
3955
|
-
const copyToClipboard = (0,
|
|
4237
|
+
const copyToClipboard = (0, import_react12.useCallback)((text, callId) => __async(void 0, null, function* () {
|
|
3956
4238
|
try {
|
|
3957
4239
|
const cleanText = text.replace(/<[^>]*>/g, "").replace(/\*\*(.*?)\*\*/g, "$1").replace(/\*(.*?)\*/g, "$1").replace(/#{1,6}\s/g, "").replace(/\[([^\]]+)\]\([^)]+\)/g, "$1");
|
|
3958
4240
|
yield navigator.clipboard.writeText(cleanText);
|
|
@@ -3963,7 +4245,7 @@ var AIChatPanel = ({
|
|
|
3963
4245
|
console.error("Failed to copy:", err);
|
|
3964
4246
|
}
|
|
3965
4247
|
}), [interactionClicked]);
|
|
3966
|
-
const handleThumbsUp = (0,
|
|
4248
|
+
const handleThumbsUp = (0, import_react12.useCallback)((callId) => __async(void 0, null, function* () {
|
|
3967
4249
|
console.log("[AIChatPanel] Thumbs up clicked:", callId);
|
|
3968
4250
|
setFeedbackCallId({ callId, type: "up" });
|
|
3969
4251
|
setTimeout(() => setFeedbackCallId(null), 2e3);
|
|
@@ -3972,7 +4254,7 @@ var AIChatPanel = ({
|
|
|
3972
4254
|
thumbsUpClick(callId);
|
|
3973
4255
|
}
|
|
3974
4256
|
}), [thumbsUpClick, interactionClicked]);
|
|
3975
|
-
const handleThumbsDown = (0,
|
|
4257
|
+
const handleThumbsDown = (0, import_react12.useCallback)((callId) => __async(void 0, null, function* () {
|
|
3976
4258
|
console.log("[AIChatPanel] Thumbs down clicked:", callId);
|
|
3977
4259
|
setFeedbackCallId({ callId, type: "down" });
|
|
3978
4260
|
setTimeout(() => setFeedbackCallId(null), 2e3);
|
|
@@ -3981,24 +4263,24 @@ var AIChatPanel = ({
|
|
|
3981
4263
|
thumbsDownClick(callId);
|
|
3982
4264
|
}
|
|
3983
4265
|
}), [thumbsDownClick, interactionClicked]);
|
|
3984
|
-
const scrollToBottom = (0,
|
|
3985
|
-
var
|
|
4266
|
+
const scrollToBottom = (0, import_react12.useCallback)(() => {
|
|
4267
|
+
var _a2;
|
|
3986
4268
|
if (scrollRAFRef.current) {
|
|
3987
4269
|
cancelAnimationFrame(scrollRAFRef.current);
|
|
3988
4270
|
}
|
|
3989
4271
|
const now = Date.now();
|
|
3990
4272
|
if (now - lastScrollTimeRef.current < 100) {
|
|
3991
4273
|
scrollRAFRef.current = requestAnimationFrame(() => {
|
|
3992
|
-
var
|
|
3993
|
-
(
|
|
4274
|
+
var _a3;
|
|
4275
|
+
(_a3 = bottomRef.current) == null ? void 0 : _a3.scrollIntoView({ behavior: "auto" });
|
|
3994
4276
|
lastScrollTimeRef.current = Date.now();
|
|
3995
4277
|
});
|
|
3996
4278
|
return;
|
|
3997
4279
|
}
|
|
3998
|
-
(
|
|
4280
|
+
(_a2 = bottomRef.current) == null ? void 0 : _a2.scrollIntoView({ behavior: "auto" });
|
|
3999
4281
|
lastScrollTimeRef.current = now;
|
|
4000
4282
|
}, []);
|
|
4001
|
-
const continueChat = (0,
|
|
4283
|
+
const continueChat = (0, import_react12.useCallback)((promptText) => {
|
|
4002
4284
|
console.log("AIChatPanel.continueChat called with:", promptText);
|
|
4003
4285
|
setThinkingBlocks([]);
|
|
4004
4286
|
setCurrentThinkingIndex(0);
|
|
@@ -4053,11 +4335,6 @@ var AIChatPanel = ({
|
|
|
4053
4335
|
if (messagesAndHistory.length === 0 && promptTemplate) {
|
|
4054
4336
|
fullPromptToSend = promptTemplate.replace("{{prompt}}", fullPromptToSend);
|
|
4055
4337
|
}
|
|
4056
|
-
if (followOnPrompt) {
|
|
4057
|
-
fullPromptToSend += `
|
|
4058
|
-
|
|
4059
|
-
${followOnPrompt}`;
|
|
4060
|
-
}
|
|
4061
4338
|
const newController = new AbortController();
|
|
4062
4339
|
setLastController(newController);
|
|
4063
4340
|
send(
|
|
@@ -4125,7 +4402,6 @@ ${followOnPrompt}`;
|
|
|
4125
4402
|
clearFollowOnQuestionsNextPrompt,
|
|
4126
4403
|
history,
|
|
4127
4404
|
promptTemplate,
|
|
4128
|
-
followOnPrompt,
|
|
4129
4405
|
send,
|
|
4130
4406
|
service,
|
|
4131
4407
|
ensureConversation,
|
|
@@ -4134,13 +4410,13 @@ ${followOnPrompt}`;
|
|
|
4134
4410
|
onConversationCreated,
|
|
4135
4411
|
setResponse
|
|
4136
4412
|
]);
|
|
4137
|
-
const handleSuggestionClick = (0,
|
|
4413
|
+
const handleSuggestionClick = (0, import_react12.useCallback)((question) => {
|
|
4138
4414
|
continueChat(question);
|
|
4139
4415
|
}, [continueChat]);
|
|
4140
|
-
const handleStop = (0,
|
|
4416
|
+
const handleStop = (0, import_react12.useCallback)(() => {
|
|
4141
4417
|
stop(lastController);
|
|
4142
4418
|
}, [stop, lastController]);
|
|
4143
|
-
const handleNewConversation = (0,
|
|
4419
|
+
const handleNewConversation = (0, import_react12.useCallback)(() => {
|
|
4144
4420
|
if (!newConversationConfirm) {
|
|
4145
4421
|
setNewConversationConfirm(true);
|
|
4146
4422
|
setTimeout(() => setNewConversationConfirm(false), 3e3);
|
|
@@ -4167,12 +4443,12 @@ ${followOnPrompt}`;
|
|
|
4167
4443
|
setUserHasScrolled(false);
|
|
4168
4444
|
setError(null);
|
|
4169
4445
|
setTimeout(() => {
|
|
4170
|
-
var
|
|
4446
|
+
var _a2;
|
|
4171
4447
|
setJustReset(false);
|
|
4172
|
-
(
|
|
4448
|
+
(_a2 = responseAreaRef.current) == null ? void 0 : _a2.scrollTo({ top: 0, behavior: "smooth" });
|
|
4173
4449
|
}, 100);
|
|
4174
4450
|
}, [newConversationConfirm, idle, stop, lastController, setResponse, followOnQuestions]);
|
|
4175
|
-
(0,
|
|
4451
|
+
(0, import_react12.useEffect)(() => {
|
|
4176
4452
|
if (!response || !lastKey || justReset) return;
|
|
4177
4453
|
const { cleanedText, blocks } = processThinkingTags(response);
|
|
4178
4454
|
setThinkingBlocks(blocks);
|
|
@@ -4187,7 +4463,7 @@ ${followOnPrompt}`;
|
|
|
4187
4463
|
return newHistory;
|
|
4188
4464
|
});
|
|
4189
4465
|
}, [response, lastKey, lastCallId, processThinkingTags, justReset]);
|
|
4190
|
-
(0,
|
|
4466
|
+
(0, import_react12.useEffect)(() => {
|
|
4191
4467
|
const wasStreaming = !prevIdleRef.current;
|
|
4192
4468
|
const isNowIdle = idle;
|
|
4193
4469
|
prevIdleRef.current = idle;
|
|
@@ -4212,16 +4488,17 @@ ${followOnPrompt}`;
|
|
|
4212
4488
|
hasNotifiedCompletionRef.current = false;
|
|
4213
4489
|
}
|
|
4214
4490
|
}, [idle]);
|
|
4215
|
-
(0,
|
|
4216
|
-
|
|
4491
|
+
(0, import_react12.useEffect)(() => {
|
|
4492
|
+
const shouldAutoScroll = scrollToEnd || !userHasScrolled;
|
|
4493
|
+
if (!idle && shouldAutoScroll && response) {
|
|
4217
4494
|
scrollToBottom();
|
|
4218
4495
|
}
|
|
4219
|
-
}, [response, scrollToBottom, idle, userHasScrolled]);
|
|
4220
|
-
const idleRef = (0,
|
|
4496
|
+
}, [response, scrollToBottom, idle, userHasScrolled, scrollToEnd]);
|
|
4497
|
+
const idleRef = (0, import_react12.useRef)(idle);
|
|
4221
4498
|
idleRef.current = idle;
|
|
4222
|
-
const userHasScrolledRef = (0,
|
|
4499
|
+
const userHasScrolledRef = (0, import_react12.useRef)(userHasScrolled);
|
|
4223
4500
|
userHasScrolledRef.current = userHasScrolled;
|
|
4224
|
-
(0,
|
|
4501
|
+
(0, import_react12.useEffect)(() => {
|
|
4225
4502
|
const scrollArea = responseAreaRef.current;
|
|
4226
4503
|
if (!scrollArea) return;
|
|
4227
4504
|
const scrollViewport = scrollArea.querySelector("[data-radix-scroll-area-viewport]");
|
|
@@ -4240,16 +4517,16 @@ ${followOnPrompt}`;
|
|
|
4240
4517
|
scrollElement.addEventListener("scroll", handleScroll, { passive: true });
|
|
4241
4518
|
return () => scrollElement.removeEventListener("scroll", handleScroll);
|
|
4242
4519
|
}, []);
|
|
4243
|
-
(0,
|
|
4520
|
+
(0, import_react12.useEffect)(() => {
|
|
4244
4521
|
setFollowOnQuestionsState(followOnQuestions);
|
|
4245
4522
|
}, [followOnQuestions]);
|
|
4246
|
-
(0,
|
|
4523
|
+
(0, import_react12.useEffect)(() => {
|
|
4247
4524
|
const currentlyLoading = isLoading || !idle;
|
|
4248
4525
|
if (onLoadingChange) {
|
|
4249
4526
|
onLoadingChange(currentlyLoading);
|
|
4250
4527
|
}
|
|
4251
4528
|
}, [isLoading, idle, onLoadingChange]);
|
|
4252
|
-
(0,
|
|
4529
|
+
(0, import_react12.useEffect)(() => {
|
|
4253
4530
|
return () => {
|
|
4254
4531
|
if (scrollRAFRef.current) {
|
|
4255
4532
|
cancelAnimationFrame(scrollRAFRef.current);
|
|
@@ -4269,13 +4546,19 @@ ${followOnPrompt}`;
|
|
|
4269
4546
|
}
|
|
4270
4547
|
};
|
|
4271
4548
|
}, []);
|
|
4272
|
-
(0,
|
|
4549
|
+
(0, import_react12.useEffect)(() => {
|
|
4273
4550
|
if (initialPrompt && initialPrompt !== "" && !initialPromptSentRef.current) {
|
|
4274
4551
|
initialPromptSentRef.current = true;
|
|
4275
4552
|
continueChat(initialPrompt);
|
|
4276
4553
|
}
|
|
4277
4554
|
}, [initialPrompt, continueChat]);
|
|
4278
|
-
(0,
|
|
4555
|
+
(0, import_react12.useEffect)(() => {
|
|
4556
|
+
if (followOnPrompt && followOnPrompt !== "" && followOnPrompt !== lastFollowOnPromptRef.current) {
|
|
4557
|
+
lastFollowOnPromptRef.current = followOnPrompt;
|
|
4558
|
+
continueChat(followOnPrompt);
|
|
4559
|
+
}
|
|
4560
|
+
}, [followOnPrompt, continueChat]);
|
|
4561
|
+
(0, import_react12.useEffect)(() => {
|
|
4279
4562
|
if (llmError && llmError.trim()) {
|
|
4280
4563
|
console.log("[AIChatPanel] Error detected:", llmError);
|
|
4281
4564
|
const errorMessage = llmError;
|
|
@@ -4306,21 +4589,67 @@ ${followOnPrompt}`;
|
|
|
4306
4589
|
}
|
|
4307
4590
|
}
|
|
4308
4591
|
}, [llmError, lastKey, lastCallId]);
|
|
4309
|
-
|
|
4310
|
-
|
|
4592
|
+
(0, import_react12.useEffect)(() => {
|
|
4593
|
+
const existingLinks = document.querySelectorAll(
|
|
4594
|
+
'link[data-source="ai-chat-panel"]'
|
|
4595
|
+
);
|
|
4596
|
+
existingLinks.forEach((link) => {
|
|
4597
|
+
var _a2;
|
|
4598
|
+
return (_a2 = link.parentNode) == null ? void 0 : _a2.removeChild(link);
|
|
4599
|
+
});
|
|
4600
|
+
const existingStyles = document.querySelectorAll(
|
|
4601
|
+
'style[data-source="ai-chat-panel"]'
|
|
4602
|
+
);
|
|
4603
|
+
existingStyles.forEach((style) => {
|
|
4604
|
+
var _a2;
|
|
4605
|
+
return (_a2 = style.parentNode) == null ? void 0 : _a2.removeChild(style);
|
|
4606
|
+
});
|
|
4607
|
+
if (cssUrl) {
|
|
4608
|
+
if (cssUrl.startsWith("http://") || cssUrl.startsWith("https://")) {
|
|
4609
|
+
const link = document.createElement("link");
|
|
4610
|
+
link.href = cssUrl;
|
|
4611
|
+
link.rel = "stylesheet";
|
|
4612
|
+
link.setAttribute("data-source", "ai-chat-panel");
|
|
4613
|
+
document.head.appendChild(link);
|
|
4614
|
+
} else {
|
|
4615
|
+
const style = document.createElement("style");
|
|
4616
|
+
style.textContent = cssUrl;
|
|
4617
|
+
style.setAttribute("data-source", "ai-chat-panel");
|
|
4618
|
+
document.head.appendChild(style);
|
|
4619
|
+
}
|
|
4620
|
+
}
|
|
4621
|
+
return () => {
|
|
4622
|
+
const links = document.querySelectorAll(
|
|
4623
|
+
'link[data-source="ai-chat-panel"]'
|
|
4624
|
+
);
|
|
4625
|
+
links.forEach((link) => {
|
|
4626
|
+
var _a2;
|
|
4627
|
+
return (_a2 = link.parentNode) == null ? void 0 : _a2.removeChild(link);
|
|
4628
|
+
});
|
|
4629
|
+
const styles = document.querySelectorAll(
|
|
4630
|
+
'style[data-source="ai-chat-panel"]'
|
|
4631
|
+
);
|
|
4632
|
+
styles.forEach((style) => {
|
|
4633
|
+
var _a2;
|
|
4634
|
+
return (_a2 = style.parentNode) == null ? void 0 : _a2.removeChild(style);
|
|
4635
|
+
});
|
|
4636
|
+
};
|
|
4637
|
+
}, [cssUrl]);
|
|
4638
|
+
const CodeBlock = (0, import_react12.useCallback)((_b) => {
|
|
4639
|
+
var _c = _b, { node, inline, className, children } = _c, props = __objRest(_c, ["node", "inline", "className", "children"]);
|
|
4311
4640
|
const match = /language-(\w+)/.exec(className || "");
|
|
4312
|
-
return !inline && match ? /* @__PURE__ */
|
|
4641
|
+
return !inline && match ? /* @__PURE__ */ import_react12.default.createElement(
|
|
4313
4642
|
import_react_syntax_highlighter2.Prism,
|
|
4314
4643
|
__spreadValues({
|
|
4315
|
-
style:
|
|
4644
|
+
style: effectivePrismStyle,
|
|
4316
4645
|
language: match[1],
|
|
4317
4646
|
PreTag: "div"
|
|
4318
4647
|
}, props),
|
|
4319
4648
|
String(children).replace(/\n$/, "")
|
|
4320
|
-
) : /* @__PURE__ */
|
|
4321
|
-
}, [
|
|
4322
|
-
const AgentSuggestionCard =
|
|
4323
|
-
(0,
|
|
4649
|
+
) : /* @__PURE__ */ import_react12.default.createElement("code", __spreadValues({ className }, props), children);
|
|
4650
|
+
}, [effectivePrismStyle]);
|
|
4651
|
+
const AgentSuggestionCard = import_react12.default.memo(({ agentId, agentName, reason }) => {
|
|
4652
|
+
(0, import_react12.useEffect)(() => {
|
|
4324
4653
|
const timer = setTimeout(() => {
|
|
4325
4654
|
scrollToBottom();
|
|
4326
4655
|
}, 100);
|
|
@@ -4334,33 +4663,33 @@ ${followOnPrompt}`;
|
|
|
4334
4663
|
const avatarUrl = agentOption == null ? void 0 : agentOption.avatarUrl;
|
|
4335
4664
|
const isCurrentAgent = currentAgentId === agentId;
|
|
4336
4665
|
if (!isValidAgent || agentId.includes("{") || agentId.includes("$")) {
|
|
4337
|
-
return /* @__PURE__ */
|
|
4666
|
+
return /* @__PURE__ */ import_react12.default.createElement("span", { className: "ai-chat-agent-suggestion ai-chat-agent-suggestion--invalid" }, /* @__PURE__ */ import_react12.default.createElement("span", { className: "ai-chat-agent-suggestion__content" }, avatarUrl ? /* @__PURE__ */ import_react12.default.createElement(
|
|
4338
4667
|
"img",
|
|
4339
4668
|
{
|
|
4340
4669
|
src: avatarUrl,
|
|
4341
4670
|
alt: agentName,
|
|
4342
4671
|
className: "ai-chat-agent-suggestion__avatar"
|
|
4343
4672
|
}
|
|
4344
|
-
) : /* @__PURE__ */
|
|
4673
|
+
) : /* @__PURE__ */ import_react12.default.createElement("span", { className: "ai-chat-agent-suggestion__icon" }, /* @__PURE__ */ import_react12.default.createElement("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ import_react12.default.createElement("path", { d: "M12 8V4H8" }), /* @__PURE__ */ import_react12.default.createElement("rect", { width: "16", height: "12", x: "4", y: "8", rx: "2" }), /* @__PURE__ */ import_react12.default.createElement("path", { d: "M2 14h2" }), /* @__PURE__ */ import_react12.default.createElement("path", { d: "M20 14h2" }), /* @__PURE__ */ import_react12.default.createElement("path", { d: "M15 13v2" }), /* @__PURE__ */ import_react12.default.createElement("path", { d: "M9 13v2" }))), /* @__PURE__ */ import_react12.default.createElement("span", { className: "ai-chat-agent-suggestion__text" }, /* @__PURE__ */ import_react12.default.createElement("span", { className: "ai-chat-agent-suggestion__label" }, "Suggested: ", agentName), reason && /* @__PURE__ */ import_react12.default.createElement("span", { className: "ai-chat-agent-suggestion__reason" }, reason))), /* @__PURE__ */ import_react12.default.createElement("span", { className: "ai-chat-agent-suggestion__unavailable" }, "Agent unavailable"));
|
|
4345
4674
|
}
|
|
4346
4675
|
if (isCurrentAgent) {
|
|
4347
|
-
return /* @__PURE__ */
|
|
4676
|
+
return /* @__PURE__ */ import_react12.default.createElement("span", { className: "ai-chat-agent-suggestion ai-chat-agent-suggestion--switched" }, /* @__PURE__ */ import_react12.default.createElement("span", { className: "ai-chat-agent-suggestion__content" }, avatarUrl ? /* @__PURE__ */ import_react12.default.createElement(
|
|
4348
4677
|
"img",
|
|
4349
4678
|
{
|
|
4350
4679
|
src: avatarUrl,
|
|
4351
4680
|
alt: agentName,
|
|
4352
4681
|
className: "ai-chat-agent-suggestion__avatar"
|
|
4353
4682
|
}
|
|
4354
|
-
) : /* @__PURE__ */
|
|
4683
|
+
) : /* @__PURE__ */ import_react12.default.createElement("span", { className: "ai-chat-agent-suggestion__icon ai-chat-agent-suggestion__icon--switched" }, /* @__PURE__ */ import_react12.default.createElement("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ import_react12.default.createElement("polyline", { points: "20 6 9 17 4 12" }))), /* @__PURE__ */ import_react12.default.createElement("span", { className: "ai-chat-agent-suggestion__text" }, /* @__PURE__ */ import_react12.default.createElement("span", { className: "ai-chat-agent-suggestion__label" }, "Switched to ", agentName), reason && /* @__PURE__ */ import_react12.default.createElement("span", { className: "ai-chat-agent-suggestion__reason" }, reason))), /* @__PURE__ */ import_react12.default.createElement("span", { className: "ai-chat-agent-suggestion__switched-badge" }, /* @__PURE__ */ import_react12.default.createElement("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ import_react12.default.createElement("polyline", { points: "20 6 9 17 4 12" })), "Active"));
|
|
4355
4684
|
}
|
|
4356
|
-
return /* @__PURE__ */
|
|
4685
|
+
return /* @__PURE__ */ import_react12.default.createElement("span", { className: "ai-chat-agent-suggestion" }, /* @__PURE__ */ import_react12.default.createElement("span", { className: "ai-chat-agent-suggestion__content" }, avatarUrl ? /* @__PURE__ */ import_react12.default.createElement(
|
|
4357
4686
|
"img",
|
|
4358
4687
|
{
|
|
4359
4688
|
src: avatarUrl,
|
|
4360
4689
|
alt: agentName,
|
|
4361
4690
|
className: "ai-chat-agent-suggestion__avatar"
|
|
4362
4691
|
}
|
|
4363
|
-
) : /* @__PURE__ */
|
|
4692
|
+
) : /* @__PURE__ */ import_react12.default.createElement("span", { className: "ai-chat-agent-suggestion__icon" }, /* @__PURE__ */ import_react12.default.createElement("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ import_react12.default.createElement("path", { d: "M12 8V4H8" }), /* @__PURE__ */ import_react12.default.createElement("rect", { width: "16", height: "12", x: "4", y: "8", rx: "2" }), /* @__PURE__ */ import_react12.default.createElement("path", { d: "M2 14h2" }), /* @__PURE__ */ import_react12.default.createElement("path", { d: "M20 14h2" }), /* @__PURE__ */ import_react12.default.createElement("path", { d: "M15 13v2" }), /* @__PURE__ */ import_react12.default.createElement("path", { d: "M9 13v2" }))), /* @__PURE__ */ import_react12.default.createElement("span", { className: "ai-chat-agent-suggestion__text" }, /* @__PURE__ */ import_react12.default.createElement("span", { className: "ai-chat-agent-suggestion__label" }, "Suggested: ", agentName), reason && /* @__PURE__ */ import_react12.default.createElement("span", { className: "ai-chat-agent-suggestion__reason" }, reason))), /* @__PURE__ */ import_react12.default.createElement(
|
|
4364
4693
|
Button,
|
|
4365
4694
|
{
|
|
4366
4695
|
variant: "default",
|
|
@@ -4376,15 +4705,15 @@ ${followOnPrompt}`;
|
|
|
4376
4705
|
"Switch"
|
|
4377
4706
|
));
|
|
4378
4707
|
});
|
|
4379
|
-
const markdownComponents = (0,
|
|
4708
|
+
const markdownComponents = (0, import_react12.useMemo)(() => ({
|
|
4380
4709
|
code: CodeBlock,
|
|
4381
|
-
"agent-suggestion": (
|
|
4382
|
-
var _b =
|
|
4710
|
+
"agent-suggestion": (_a2) => {
|
|
4711
|
+
var _b = _a2, { node } = _b, props = __objRest(_b, ["node"]);
|
|
4383
4712
|
const agentId = props["data-agent-id"];
|
|
4384
4713
|
const agentName = props["data-agent-name"];
|
|
4385
4714
|
const reason = props["data-reason"];
|
|
4386
4715
|
if (!agentId) return null;
|
|
4387
|
-
return /* @__PURE__ */
|
|
4716
|
+
return /* @__PURE__ */ import_react12.default.createElement(
|
|
4388
4717
|
AgentSuggestionCard,
|
|
4389
4718
|
{
|
|
4390
4719
|
agentId,
|
|
@@ -4394,145 +4723,358 @@ ${followOnPrompt}`;
|
|
|
4394
4723
|
);
|
|
4395
4724
|
}
|
|
4396
4725
|
}), [CodeBlock, AgentSuggestionCard]);
|
|
4397
|
-
const renderThinkingBlocks = (0,
|
|
4726
|
+
const renderThinkingBlocks = (0, import_react12.useCallback)(() => {
|
|
4398
4727
|
if (thinkingBlocks.length === 0) return null;
|
|
4399
4728
|
const currentBlock = thinkingBlocks[currentThinkingIndex];
|
|
4400
4729
|
if (!currentBlock) return null;
|
|
4401
4730
|
const isReasoning = currentBlock.type === "reasoning";
|
|
4402
|
-
const icon = isReasoning ? /* @__PURE__ */
|
|
4731
|
+
const icon = isReasoning ? /* @__PURE__ */ import_react12.default.createElement(BrainIcon, null) : /* @__PURE__ */ import_react12.default.createElement(SearchIcon, null);
|
|
4403
4732
|
const title2 = isReasoning ? "Reasoning" : "Searching";
|
|
4404
|
-
return /* @__PURE__ */
|
|
4733
|
+
return /* @__PURE__ */ import_react12.default.createElement("div", { className: "ai-chat-thinking" }, /* @__PURE__ */ import_react12.default.createElement("div", { className: "ai-chat-thinking__header" }, /* @__PURE__ */ import_react12.default.createElement("span", { className: "ai-chat-thinking__icon" }, icon), /* @__PURE__ */ import_react12.default.createElement("span", { className: "ai-chat-thinking__title" }, title2), thinkingBlocks.length > 1 && /* @__PURE__ */ import_react12.default.createElement("span", { className: "ai-chat-thinking__nav" }, /* @__PURE__ */ import_react12.default.createElement(
|
|
4405
4734
|
"button",
|
|
4406
4735
|
{
|
|
4407
4736
|
onClick: () => setCurrentThinkingIndex(Math.max(0, currentThinkingIndex - 1)),
|
|
4408
4737
|
disabled: currentThinkingIndex === 0
|
|
4409
4738
|
},
|
|
4410
4739
|
"\u2039"
|
|
4411
|
-
), /* @__PURE__ */
|
|
4740
|
+
), /* @__PURE__ */ import_react12.default.createElement("span", null, currentThinkingIndex + 1, " / ", thinkingBlocks.length), /* @__PURE__ */ import_react12.default.createElement(
|
|
4412
4741
|
"button",
|
|
4413
4742
|
{
|
|
4414
4743
|
onClick: () => setCurrentThinkingIndex(Math.min(thinkingBlocks.length - 1, currentThinkingIndex + 1)),
|
|
4415
4744
|
disabled: currentThinkingIndex === thinkingBlocks.length - 1
|
|
4416
4745
|
},
|
|
4417
4746
|
"\u203A"
|
|
4418
|
-
))), /* @__PURE__ */
|
|
4747
|
+
))), /* @__PURE__ */ import_react12.default.createElement("div", { className: "ai-chat-thinking__content" }, cleanContentForDisplay(currentBlock.content)));
|
|
4419
4748
|
}, [thinkingBlocks, currentThinkingIndex, cleanContentForDisplay]);
|
|
4420
4749
|
const panelClasses = ["ai-chat-panel", theme === "dark" ? "dark-theme" : ""].filter(Boolean).join(" ");
|
|
4421
|
-
return /* @__PURE__ */
|
|
4422
|
-
"
|
|
4750
|
+
return /* @__PURE__ */ import_react12.default.createElement(
|
|
4751
|
+
"div",
|
|
4423
4752
|
{
|
|
4424
|
-
className:
|
|
4425
|
-
|
|
4426
|
-
"aria-label": "Dismiss error"
|
|
4753
|
+
className: panelClasses,
|
|
4754
|
+
style: __spreadValues(__spreadValues({}, width && { width }), height && { height })
|
|
4427
4755
|
},
|
|
4428
|
-
/* @__PURE__ */
|
|
4429
|
-
|
|
4430
|
-
|
|
4431
|
-
|
|
4432
|
-
|
|
4433
|
-
|
|
4434
|
-
|
|
4756
|
+
title && /* @__PURE__ */ import_react12.default.createElement("div", { className: "ai-chat-panel__title" }, title),
|
|
4757
|
+
error && /* @__PURE__ */ import_react12.default.createElement("div", { className: "ai-chat-error-banner" }, /* @__PURE__ */ import_react12.default.createElement("div", { className: "ai-chat-error-banner__icon" }, /* @__PURE__ */ import_react12.default.createElement(AlertCircleIcon, null)), /* @__PURE__ */ import_react12.default.createElement("div", { className: "ai-chat-error-banner__content" }, /* @__PURE__ */ import_react12.default.createElement("div", { className: "ai-chat-error-banner__message" }, error.message), error.code === "413" && /* @__PURE__ */ import_react12.default.createElement("div", { className: "ai-chat-error-banner__hint" }, "Try starting a new conversation or reducing the amount of information being sent.")), /* @__PURE__ */ import_react12.default.createElement(
|
|
4758
|
+
"button",
|
|
4759
|
+
{
|
|
4760
|
+
className: "ai-chat-error-banner__close",
|
|
4761
|
+
onClick: () => setError(null),
|
|
4762
|
+
"aria-label": "Dismiss error"
|
|
4763
|
+
},
|
|
4764
|
+
/* @__PURE__ */ import_react12.default.createElement(CloseIcon, null)
|
|
4765
|
+
)),
|
|
4766
|
+
/* @__PURE__ */ import_react12.default.createElement(ScrollArea, { className: "ai-chat-panel__messages", ref: responseAreaRef }, initialMessage && /* @__PURE__ */ import_react12.default.createElement("div", { className: "ai-chat-message ai-chat-message--assistant" }, /* @__PURE__ */ import_react12.default.createElement("div", { className: "ai-chat-message__content" }, markdownClass ? /* @__PURE__ */ import_react12.default.createElement("div", { className: markdownClass }, /* @__PURE__ */ import_react12.default.createElement(
|
|
4435
4767
|
import_react_markdown2.default,
|
|
4436
4768
|
{
|
|
4437
4769
|
remarkPlugins: [import_remark_gfm2.default],
|
|
4438
|
-
rehypePlugins: [import_rehype_raw2.default]
|
|
4439
|
-
components: markdownComponents
|
|
4770
|
+
rehypePlugins: [import_rehype_raw2.default]
|
|
4440
4771
|
},
|
|
4441
|
-
|
|
4442
|
-
)
|
|
4772
|
+
initialMessage
|
|
4773
|
+
)) : /* @__PURE__ */ import_react12.default.createElement(
|
|
4443
4774
|
import_react_markdown2.default,
|
|
4444
4775
|
{
|
|
4445
4776
|
remarkPlugins: [import_remark_gfm2.default],
|
|
4446
|
-
rehypePlugins: [import_rehype_raw2.default]
|
|
4447
|
-
components: markdownComponents
|
|
4777
|
+
rehypePlugins: [import_rehype_raw2.default]
|
|
4448
4778
|
},
|
|
4449
|
-
|
|
4450
|
-
))), (
|
|
4451
|
-
|
|
4779
|
+
initialMessage
|
|
4780
|
+
))), Object.entries(history).map(([prompt, entry], index, entries) => {
|
|
4781
|
+
const isLastEntry = index === entries.length - 1;
|
|
4782
|
+
const isSystemMessage = prompt.startsWith("__system__:");
|
|
4783
|
+
const { cleanedText } = processThinkingTags(entry.content);
|
|
4784
|
+
const processedContent = processActions(cleanedText);
|
|
4785
|
+
return /* @__PURE__ */ import_react12.default.createElement("div", { key: index, className: "ai-chat-entry" }, !(hideInitialPrompt && index === 0) && !isSystemMessage && /* @__PURE__ */ import_react12.default.createElement("div", { className: "ai-chat-message ai-chat-message--user" }, /* @__PURE__ */ import_react12.default.createElement("div", { className: "ai-chat-message__content" }, formatPromptForDisplay(prompt))), /* @__PURE__ */ import_react12.default.createElement("div", { className: "ai-chat-message ai-chat-message--assistant" }, /* @__PURE__ */ import_react12.default.createElement("div", { className: "ai-chat-message__content" }, isLastEntry && (isLoading || !idle) && !justReset ? /* @__PURE__ */ import_react12.default.createElement("div", { className: "ai-chat-streaming" }, thinkingBlocks.length > 0 && renderThinkingBlocks(), processedContent ? markdownClass ? /* @__PURE__ */ import_react12.default.createElement("div", { className: markdownClass }, /* @__PURE__ */ import_react12.default.createElement(
|
|
4786
|
+
import_react_markdown2.default,
|
|
4787
|
+
{
|
|
4788
|
+
remarkPlugins: [import_remark_gfm2.default],
|
|
4789
|
+
rehypePlugins: [import_rehype_raw2.default],
|
|
4790
|
+
components: markdownComponents
|
|
4791
|
+
},
|
|
4792
|
+
processedContent
|
|
4793
|
+
)) : /* @__PURE__ */ import_react12.default.createElement(
|
|
4794
|
+
import_react_markdown2.default,
|
|
4795
|
+
{
|
|
4796
|
+
remarkPlugins: [import_remark_gfm2.default],
|
|
4797
|
+
rehypePlugins: [import_rehype_raw2.default],
|
|
4798
|
+
components: markdownComponents
|
|
4799
|
+
},
|
|
4800
|
+
processedContent
|
|
4801
|
+
) : /* @__PURE__ */ import_react12.default.createElement("div", { className: "ai-chat-loading" }, /* @__PURE__ */ import_react12.default.createElement("span", null, "Thinking"), /* @__PURE__ */ import_react12.default.createElement("span", { className: "ai-chat-loading__dots" }, /* @__PURE__ */ import_react12.default.createElement("span", { className: "ai-chat-loading__dot" }), /* @__PURE__ */ import_react12.default.createElement("span", { className: "ai-chat-loading__dot" }), /* @__PURE__ */ import_react12.default.createElement("span", { className: "ai-chat-loading__dot" })))) : /* @__PURE__ */ import_react12.default.createElement(import_react12.default.Fragment, null, isLastEntry && thinkingBlocks.length > 0 && renderThinkingBlocks(), markdownClass ? /* @__PURE__ */ import_react12.default.createElement("div", { className: markdownClass }, /* @__PURE__ */ import_react12.default.createElement(
|
|
4802
|
+
import_react_markdown2.default,
|
|
4803
|
+
{
|
|
4804
|
+
remarkPlugins: [import_remark_gfm2.default],
|
|
4805
|
+
rehypePlugins: [import_rehype_raw2.default],
|
|
4806
|
+
components: markdownComponents
|
|
4807
|
+
},
|
|
4808
|
+
processedContent
|
|
4809
|
+
)) : /* @__PURE__ */ import_react12.default.createElement(
|
|
4810
|
+
import_react_markdown2.default,
|
|
4811
|
+
{
|
|
4812
|
+
remarkPlugins: [import_remark_gfm2.default],
|
|
4813
|
+
rehypePlugins: [import_rehype_raw2.default],
|
|
4814
|
+
components: markdownComponents
|
|
4815
|
+
},
|
|
4816
|
+
processedContent
|
|
4817
|
+
))), (!isLastEntry || !isLoading) && /* @__PURE__ */ import_react12.default.createElement("div", { className: "ai-chat-message__actions" }, /* @__PURE__ */ import_react12.default.createElement(
|
|
4818
|
+
"button",
|
|
4819
|
+
{
|
|
4820
|
+
className: "ai-chat-action-button",
|
|
4821
|
+
onClick: () => copyToClipboard(entry.content, entry.callId),
|
|
4822
|
+
title: copiedCallId === entry.callId ? "Copied!" : "Copy"
|
|
4823
|
+
},
|
|
4824
|
+
copiedCallId === entry.callId ? /* @__PURE__ */ import_react12.default.createElement("span", { style: { fontSize: "11px", fontWeight: 500 } }, "Copied!") : /* @__PURE__ */ import_react12.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "ai-chat-icon-sm" }, /* @__PURE__ */ import_react12.default.createElement("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2", ry: "2" }), /* @__PURE__ */ import_react12.default.createElement("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" }))
|
|
4825
|
+
), /* @__PURE__ */ import_react12.default.createElement(
|
|
4826
|
+
"button",
|
|
4827
|
+
{
|
|
4828
|
+
className: "ai-chat-action-button",
|
|
4829
|
+
onClick: () => handleThumbsUp(entry.callId),
|
|
4830
|
+
title: (feedbackCallId == null ? void 0 : feedbackCallId.callId) === entry.callId && (feedbackCallId == null ? void 0 : feedbackCallId.type) === "up" ? "Thanks!" : "Good response",
|
|
4831
|
+
style: (feedbackCallId == null ? void 0 : feedbackCallId.callId) === entry.callId && (feedbackCallId == null ? void 0 : feedbackCallId.type) === "up" ? { color: "#22c55e" } : void 0
|
|
4832
|
+
},
|
|
4833
|
+
(feedbackCallId == null ? void 0 : feedbackCallId.callId) === entry.callId && (feedbackCallId == null ? void 0 : feedbackCallId.type) === "up" ? /* @__PURE__ */ import_react12.default.createElement("span", { style: { fontSize: "11px", fontWeight: 500 } }, "Thanks!") : /* @__PURE__ */ import_react12.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "ai-chat-icon-sm" }, /* @__PURE__ */ import_react12.default.createElement("path", { d: "M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3" }))
|
|
4834
|
+
), /* @__PURE__ */ import_react12.default.createElement(
|
|
4835
|
+
"button",
|
|
4836
|
+
{
|
|
4837
|
+
className: "ai-chat-action-button",
|
|
4838
|
+
onClick: () => handleThumbsDown(entry.callId),
|
|
4839
|
+
title: (feedbackCallId == null ? void 0 : feedbackCallId.callId) === entry.callId && (feedbackCallId == null ? void 0 : feedbackCallId.type) === "down" ? "Thanks!" : "Poor response",
|
|
4840
|
+
style: (feedbackCallId == null ? void 0 : feedbackCallId.callId) === entry.callId && (feedbackCallId == null ? void 0 : feedbackCallId.type) === "down" ? { color: "#ef4444" } : void 0
|
|
4841
|
+
},
|
|
4842
|
+
(feedbackCallId == null ? void 0 : feedbackCallId.callId) === entry.callId && (feedbackCallId == null ? void 0 : feedbackCallId.type) === "down" ? /* @__PURE__ */ import_react12.default.createElement("span", { style: { fontSize: "11px", fontWeight: 500 } }, "Thanks!") : /* @__PURE__ */ import_react12.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "ai-chat-icon-sm" }, /* @__PURE__ */ import_react12.default.createElement("path", { d: "M10 15v4a3 3 0 0 0 3 3l4-9V2H5.72a2 2 0 0 0-2 1.7l-1.38 9a2 2 0 0 0 2 2.3zm7-13h2.67A2.31 2.31 0 0 1 22 4v7a2.31 2.31 0 0 1-2.33 2H17" }))
|
|
4843
|
+
), (entry.toolCalls || entry.toolResponses) && /* @__PURE__ */ import_react12.default.createElement(
|
|
4844
|
+
"button",
|
|
4845
|
+
{
|
|
4846
|
+
className: "ai-chat-action-button",
|
|
4847
|
+
onClick: () => {
|
|
4848
|
+
setToolInfoData({
|
|
4849
|
+
calls: entry.toolCalls || [],
|
|
4850
|
+
responses: entry.toolResponses || []
|
|
4851
|
+
});
|
|
4852
|
+
setIsToolInfoModalOpen(true);
|
|
4853
|
+
},
|
|
4854
|
+
title: "View tool information"
|
|
4855
|
+
},
|
|
4856
|
+
/* @__PURE__ */ import_react12.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "ai-chat-icon-sm" }, /* @__PURE__ */ import_react12.default.createElement("circle", { cx: "12", cy: "12", r: "10" }), /* @__PURE__ */ import_react12.default.createElement("line", { x1: "12", x2: "12", y1: "16", y2: "12" }), /* @__PURE__ */ import_react12.default.createElement("line", { x1: "12", x2: "12.01", y1: "8", y2: "8" }))
|
|
4857
|
+
))));
|
|
4858
|
+
}), followOnQuestionsState.length > 0 && idle && !isLoading && /* @__PURE__ */ import_react12.default.createElement("div", { className: "ai-chat-suggestions" }, followOnQuestionsState.map((question, index) => /* @__PURE__ */ import_react12.default.createElement(
|
|
4859
|
+
Button,
|
|
4860
|
+
{
|
|
4861
|
+
key: index,
|
|
4862
|
+
variant: "outline",
|
|
4863
|
+
size: "sm",
|
|
4864
|
+
onClick: () => handleSuggestionClick(question),
|
|
4865
|
+
className: "ai-chat-suggestions__button"
|
|
4866
|
+
},
|
|
4867
|
+
question
|
|
4868
|
+
))), /* @__PURE__ */ import_react12.default.createElement("div", { ref: bottomRef })),
|
|
4869
|
+
pendingToolRequests.length > 0 && /* @__PURE__ */ import_react12.default.createElement("div", { className: "ai-chat-approve-tools-panel" }, /* @__PURE__ */ import_react12.default.createElement("div", { className: "ai-chat-approve-tools-header" }, "Tool Approval Required"), /* @__PURE__ */ import_react12.default.createElement("div", { className: "ai-chat-approve-tools-description" }, "The AI wants to use the following tools:"), getUniqueToolNames().map((toolName) => /* @__PURE__ */ import_react12.default.createElement("div", { key: toolName, className: "ai-chat-approve-tool-item" }, /* @__PURE__ */ import_react12.default.createElement("div", { className: "ai-chat-approve-tool-name" }, toolName), /* @__PURE__ */ import_react12.default.createElement("div", { className: "ai-chat-approve-tools-buttons" }, /* @__PURE__ */ import_react12.default.createElement(
|
|
4870
|
+
Button,
|
|
4452
4871
|
{
|
|
4453
|
-
|
|
4454
|
-
|
|
4455
|
-
|
|
4872
|
+
size: "sm",
|
|
4873
|
+
variant: "outline",
|
|
4874
|
+
className: "ai-chat-approve-tools-button",
|
|
4875
|
+
onClick: () => handleToolApproval(toolName, "once")
|
|
4456
4876
|
},
|
|
4457
|
-
|
|
4458
|
-
), /* @__PURE__ */
|
|
4459
|
-
|
|
4877
|
+
"Once"
|
|
4878
|
+
), /* @__PURE__ */ import_react12.default.createElement(
|
|
4879
|
+
Button,
|
|
4880
|
+
{
|
|
4881
|
+
size: "sm",
|
|
4882
|
+
variant: "outline",
|
|
4883
|
+
className: "ai-chat-approve-tools-button",
|
|
4884
|
+
onClick: () => handleToolApproval(toolName, "session")
|
|
4885
|
+
},
|
|
4886
|
+
"This Session"
|
|
4887
|
+
), /* @__PURE__ */ import_react12.default.createElement(
|
|
4888
|
+
Button,
|
|
4889
|
+
{
|
|
4890
|
+
size: "sm",
|
|
4891
|
+
variant: "default",
|
|
4892
|
+
className: "ai-chat-approve-tools-button",
|
|
4893
|
+
onClick: () => handleToolApproval(toolName, "always")
|
|
4894
|
+
},
|
|
4895
|
+
"Always"
|
|
4896
|
+
))))),
|
|
4897
|
+
(showSaveButton || showEmailButton || showCallToAction) && /* @__PURE__ */ import_react12.default.createElement("div", { className: "ai-chat-button-container" }, showSaveButton && /* @__PURE__ */ import_react12.default.createElement(
|
|
4898
|
+
Button,
|
|
4460
4899
|
{
|
|
4461
|
-
|
|
4462
|
-
|
|
4463
|
-
|
|
4464
|
-
|
|
4900
|
+
variant: "outline",
|
|
4901
|
+
size: "sm",
|
|
4902
|
+
onClick: saveAsHTMLFile,
|
|
4903
|
+
disabled: Object.keys(history).length === 0,
|
|
4904
|
+
className: "ai-chat-save-button"
|
|
4465
4905
|
},
|
|
4466
|
-
|
|
4467
|
-
), /* @__PURE__ */
|
|
4906
|
+
"\u{1F4BE} Save"
|
|
4907
|
+
), showEmailButton && /* @__PURE__ */ import_react12.default.createElement(
|
|
4908
|
+
Button,
|
|
4909
|
+
{
|
|
4910
|
+
variant: "outline",
|
|
4911
|
+
size: "sm",
|
|
4912
|
+
onClick: () => {
|
|
4913
|
+
if (isEmailAddress(emailInput)) {
|
|
4914
|
+
setEmailInputSet(true);
|
|
4915
|
+
setEmailValid(true);
|
|
4916
|
+
handleSendEmail(emailInput, emailInput);
|
|
4917
|
+
setEmailClickedButNoEmail(false);
|
|
4918
|
+
} else {
|
|
4919
|
+
setShowEmailPanel(true);
|
|
4920
|
+
setEmailValid(false);
|
|
4921
|
+
setEmailClickedButNoEmail(true);
|
|
4922
|
+
}
|
|
4923
|
+
},
|
|
4924
|
+
disabled: Object.keys(history).length === 0 || isDisabledDueToNoEmail(),
|
|
4925
|
+
className: "ai-chat-email-button"
|
|
4926
|
+
},
|
|
4927
|
+
"\u{1F4E7} Email Conversation",
|
|
4928
|
+
emailSent ? " \u2713" : ""
|
|
4929
|
+
), showCallToAction && /* @__PURE__ */ import_react12.default.createElement(
|
|
4930
|
+
Button,
|
|
4931
|
+
{
|
|
4932
|
+
variant: callToActionSent ? "outline" : "default",
|
|
4933
|
+
size: "sm",
|
|
4934
|
+
onClick: () => {
|
|
4935
|
+
if (customerEmailCaptureMode !== "HIDE" && !emailInputSet) {
|
|
4936
|
+
setCTAClickedButNoEmail(true);
|
|
4937
|
+
setTimeout(() => setCTAClickedButNoEmail(false), 3e3);
|
|
4938
|
+
return;
|
|
4939
|
+
}
|
|
4940
|
+
const fromEmail = emailInput || (customer == null ? void 0 : customer.customer_user_email) || "";
|
|
4941
|
+
sendCallToActionEmail(fromEmail);
|
|
4942
|
+
},
|
|
4943
|
+
disabled: callToActionSent || Object.keys(history).length === 0,
|
|
4944
|
+
className: "ai-chat-cta-button"
|
|
4945
|
+
},
|
|
4946
|
+
callToActionSent ? "\u2713 Submitted" : callToActionButtonText
|
|
4947
|
+
)),
|
|
4948
|
+
showNewConversationButton && /* @__PURE__ */ import_react12.default.createElement("div", { className: "ai-chat-panel__new-conversation" }, /* @__PURE__ */ import_react12.default.createElement(
|
|
4949
|
+
Button,
|
|
4950
|
+
{
|
|
4951
|
+
variant: newConversationConfirm ? "destructive" : "outline",
|
|
4952
|
+
size: "sm",
|
|
4953
|
+
onClick: handleNewConversation,
|
|
4954
|
+
className: "ai-chat-new-conversation"
|
|
4955
|
+
},
|
|
4956
|
+
newConversationConfirm ? "Click to Confirm" : "New Conversation"
|
|
4957
|
+
)),
|
|
4958
|
+
showEmailPanel && /* @__PURE__ */ import_react12.default.createElement(import_react12.default.Fragment, null, !emailValid && /* @__PURE__ */ import_react12.default.createElement("div", { className: "ai-chat-email-input-message" }, isDisabledDueToNoEmail() ? "Let's get started - please enter your email" : CTAClickedButNoEmail || emailClickedButNoEmail ? "Sure, we just need an email address to contact you" : "Email address is invalid"), /* @__PURE__ */ import_react12.default.createElement("div", { className: "ai-chat-email-input-container" }, /* @__PURE__ */ import_react12.default.createElement(
|
|
4959
|
+
"input",
|
|
4960
|
+
{
|
|
4961
|
+
type: "email",
|
|
4962
|
+
name: "email",
|
|
4963
|
+
id: "email",
|
|
4964
|
+
className: emailValid ? emailInputSet ? "ai-chat-email-input-set" : "ai-chat-email-input" : "ai-chat-email-input-invalid",
|
|
4965
|
+
placeholder: customerEmailCapturePlaceholder,
|
|
4966
|
+
value: emailInput,
|
|
4967
|
+
onChange: (e) => {
|
|
4968
|
+
const newEmail = e.target.value;
|
|
4969
|
+
setEmailInput(newEmail);
|
|
4970
|
+
if (!emailInputSet) {
|
|
4971
|
+
if (customerEmailCaptureMode === "REQUIRED" && newEmail !== "") {
|
|
4972
|
+
setEmailValid(isEmailAddress(newEmail));
|
|
4973
|
+
} else {
|
|
4974
|
+
setEmailValid(true);
|
|
4975
|
+
}
|
|
4976
|
+
}
|
|
4977
|
+
},
|
|
4978
|
+
onBlur: () => {
|
|
4979
|
+
if (emailInput && isEmailAddress(emailInput) && !emailInputSet) {
|
|
4980
|
+
setEmailInputSet(true);
|
|
4981
|
+
setEmailValid(true);
|
|
4982
|
+
interactionClicked("", "emailcapture", emailInput);
|
|
4983
|
+
if (CTAClickedButNoEmail) {
|
|
4984
|
+
sendCallToActionEmail(emailInput);
|
|
4985
|
+
setCTAClickedButNoEmail(false);
|
|
4986
|
+
}
|
|
4987
|
+
if (emailClickedButNoEmail) {
|
|
4988
|
+
handleSendEmail(emailInput, emailInput);
|
|
4989
|
+
setEmailClickedButNoEmail(false);
|
|
4990
|
+
}
|
|
4991
|
+
} else if (customerEmailCaptureMode === "REQUIRED" && emailInput !== "") {
|
|
4992
|
+
setEmailValid(isEmailAddress(emailInput));
|
|
4993
|
+
}
|
|
4994
|
+
},
|
|
4995
|
+
onKeyDown: (e) => {
|
|
4996
|
+
if (e.key === "Enter") {
|
|
4997
|
+
if (isEmailAddress(emailInput)) {
|
|
4998
|
+
setEmailInputSet(true);
|
|
4999
|
+
setEmailValid(true);
|
|
5000
|
+
interactionClicked("", "emailcapture", emailInput);
|
|
5001
|
+
if (CTAClickedButNoEmail) {
|
|
5002
|
+
sendCallToActionEmail(emailInput);
|
|
5003
|
+
setCTAClickedButNoEmail(false);
|
|
5004
|
+
}
|
|
5005
|
+
if (emailClickedButNoEmail) {
|
|
5006
|
+
handleSendEmail(emailInput, emailInput);
|
|
5007
|
+
setEmailClickedButNoEmail(false);
|
|
5008
|
+
}
|
|
5009
|
+
} else {
|
|
5010
|
+
setEmailValid(false);
|
|
5011
|
+
}
|
|
5012
|
+
}
|
|
5013
|
+
},
|
|
5014
|
+
disabled: false
|
|
5015
|
+
}
|
|
5016
|
+
), emailInputSet && /* @__PURE__ */ import_react12.default.createElement(
|
|
4468
5017
|
"button",
|
|
4469
5018
|
{
|
|
4470
|
-
className: "ai-chat-
|
|
4471
|
-
onClick: () =>
|
|
4472
|
-
|
|
4473
|
-
|
|
5019
|
+
className: "ai-chat-email-edit-button",
|
|
5020
|
+
onClick: () => {
|
|
5021
|
+
setEmailInputSet(false);
|
|
5022
|
+
setEmailValid(true);
|
|
5023
|
+
},
|
|
5024
|
+
title: "Edit email"
|
|
4474
5025
|
},
|
|
4475
|
-
|
|
4476
|
-
)))
|
|
4477
|
-
|
|
4478
|
-
|
|
4479
|
-
|
|
4480
|
-
|
|
4481
|
-
|
|
4482
|
-
|
|
4483
|
-
|
|
4484
|
-
|
|
4485
|
-
|
|
4486
|
-
|
|
4487
|
-
|
|
4488
|
-
|
|
4489
|
-
|
|
4490
|
-
|
|
4491
|
-
|
|
4492
|
-
|
|
4493
|
-
|
|
4494
|
-
|
|
4495
|
-
|
|
4496
|
-
|
|
4497
|
-
|
|
4498
|
-
|
|
4499
|
-
|
|
4500
|
-
|
|
4501
|
-
|
|
4502
|
-
|
|
4503
|
-
|
|
4504
|
-
|
|
4505
|
-
|
|
4506
|
-
|
|
4507
|
-
|
|
4508
|
-
|
|
4509
|
-
|
|
4510
|
-
|
|
4511
|
-
maxContextTokens,
|
|
4512
|
-
enableContextDetailView
|
|
4513
|
-
}
|
|
4514
|
-
), showPoweredBy && /* @__PURE__ */ import_react11.default.createElement("div", { className: "ai-chat-panel__footer" }, mcpServers && mcpServers.length > 0 && /* @__PURE__ */ import_react11.default.createElement("div", { className: "ai-chat-tools-status" }, /* @__PURE__ */ import_react11.default.createElement(
|
|
4515
|
-
"span",
|
|
4516
|
-
{
|
|
4517
|
-
className: `ai-chat-tools-status__dot ${toolsLoading ? "loading" : toolsFetchError ? "error" : "ready"}`
|
|
4518
|
-
}
|
|
4519
|
-
), /* @__PURE__ */ import_react11.default.createElement("span", { className: "ai-chat-tools-status__text" }, toolsLoading ? "tools loading..." : toolsFetchError ? "tool fetch failed" : toolList.length > 0 ? `${toolList.length} tools ready` : "no tools found")), /* @__PURE__ */ import_react11.default.createElement("div", { className: "ai-chat-powered-by" }, /* @__PURE__ */ import_react11.default.createElement("span", null, "brought to you by"), /* @__PURE__ */ import_react11.default.createElement("a", { href: "https://llmasaservice.io", target: "_blank", rel: "noopener noreferrer" }, /* @__PURE__ */ import_react11.default.createElement(LLMAsAServiceLogo, null), /* @__PURE__ */ import_react11.default.createElement("span", null, "llmasaservice.io")))));
|
|
5026
|
+
"\u270E"
|
|
5027
|
+
))),
|
|
5028
|
+
/* @__PURE__ */ import_react12.default.createElement(
|
|
5029
|
+
ChatInput,
|
|
5030
|
+
{
|
|
5031
|
+
placeholder,
|
|
5032
|
+
idle,
|
|
5033
|
+
onSubmit: continueChat,
|
|
5034
|
+
onStop: handleStop,
|
|
5035
|
+
agentOptions,
|
|
5036
|
+
currentAgentId,
|
|
5037
|
+
onAgentChange,
|
|
5038
|
+
agentsLoading,
|
|
5039
|
+
currentAgentLabel: currentAgentLabel || void 0,
|
|
5040
|
+
currentAgentAvatarUrl: currentAgentAvatarUrl || void 0,
|
|
5041
|
+
contextSections,
|
|
5042
|
+
totalContextTokens,
|
|
5043
|
+
maxContextTokens,
|
|
5044
|
+
enableContextDetailView
|
|
5045
|
+
}
|
|
5046
|
+
),
|
|
5047
|
+
showPoweredBy && /* @__PURE__ */ import_react12.default.createElement("div", { className: "ai-chat-panel__footer" }, mcpServers && mcpServers.length > 0 && /* @__PURE__ */ import_react12.default.createElement("div", { className: "ai-chat-tools-status" }, /* @__PURE__ */ import_react12.default.createElement(
|
|
5048
|
+
"span",
|
|
5049
|
+
{
|
|
5050
|
+
className: `ai-chat-tools-status__dot ${toolsLoading ? "loading" : toolsFetchError ? "error" : "ready"}`
|
|
5051
|
+
}
|
|
5052
|
+
), /* @__PURE__ */ import_react12.default.createElement("span", { className: "ai-chat-tools-status__text" }, toolsLoading ? "tools loading..." : toolsFetchError ? "tool fetch failed" : toolList.length > 0 ? `${toolList.length} tools ready` : "no tools found")), /* @__PURE__ */ import_react12.default.createElement("div", { className: "ai-chat-powered-by" }, /* @__PURE__ */ import_react12.default.createElement("span", null, "brought to you by"), /* @__PURE__ */ import_react12.default.createElement("a", { href: "https://llmasaservice.io", target: "_blank", rel: "noopener noreferrer" }, /* @__PURE__ */ import_react12.default.createElement(LLMAsAServiceLogo, null), /* @__PURE__ */ import_react12.default.createElement("span", null, "llmasaservice.io")))),
|
|
5053
|
+
/* @__PURE__ */ import_react12.default.createElement(
|
|
5054
|
+
ToolInfoModal_default2,
|
|
5055
|
+
{
|
|
5056
|
+
isOpen: isToolInfoModalOpen,
|
|
5057
|
+
onClose: () => setIsToolInfoModalOpen(false),
|
|
5058
|
+
data: toolInfoData
|
|
5059
|
+
}
|
|
5060
|
+
)
|
|
5061
|
+
);
|
|
4520
5062
|
};
|
|
4521
|
-
var AIChatPanel_default =
|
|
5063
|
+
var AIChatPanel_default = import_react12.default.memo(AIChatPanel);
|
|
4522
5064
|
|
|
4523
5065
|
// src/hooks/useAgentRegistry.ts
|
|
4524
|
-
var
|
|
5066
|
+
var import_react13 = require("react");
|
|
4525
5067
|
var resolveApiEndpoint = (baseUrl, agentId) => {
|
|
4526
5068
|
return `https://api.llmasaservice.io/agents/${agentId}`;
|
|
4527
5069
|
};
|
|
4528
5070
|
function useAgentRegistry(agentIds, options = {}) {
|
|
4529
5071
|
const { url = "https://chat.llmasaservice.io", autoFetch = true, localOverrides = {} } = options;
|
|
4530
|
-
const [state, setState] = (0,
|
|
5072
|
+
const [state, setState] = (0, import_react13.useState)({
|
|
4531
5073
|
agents: {},
|
|
4532
5074
|
isLoading: false,
|
|
4533
5075
|
error: null
|
|
4534
5076
|
});
|
|
4535
|
-
const fetchAgentMetadata = (0,
|
|
5077
|
+
const fetchAgentMetadata = (0, import_react13.useCallback)(
|
|
4536
5078
|
(agentId, signal) => __async(this, null, function* () {
|
|
4537
5079
|
const endpoint = resolveApiEndpoint(url, agentId);
|
|
4538
5080
|
try {
|
|
@@ -4583,7 +5125,7 @@ function useAgentRegistry(agentIds, options = {}) {
|
|
|
4583
5125
|
}),
|
|
4584
5126
|
[url]
|
|
4585
5127
|
);
|
|
4586
|
-
const fetchAllAgents = (0,
|
|
5128
|
+
const fetchAllAgents = (0, import_react13.useCallback)(() => __async(this, null, function* () {
|
|
4587
5129
|
if (agentIds.length === 0) return;
|
|
4588
5130
|
setState((prev) => __spreadProps(__spreadValues({}, prev), { isLoading: true, error: null }));
|
|
4589
5131
|
const controller = new AbortController();
|
|
@@ -4610,7 +5152,7 @@ function useAgentRegistry(agentIds, options = {}) {
|
|
|
4610
5152
|
});
|
|
4611
5153
|
return () => controller.abort();
|
|
4612
5154
|
}), [agentIds, fetchAgentMetadata]);
|
|
4613
|
-
(0,
|
|
5155
|
+
(0, import_react13.useEffect)(() => {
|
|
4614
5156
|
if (!autoFetch) return;
|
|
4615
5157
|
const abortController = new AbortController();
|
|
4616
5158
|
const agentsToFetch = agentIds.filter(
|
|
@@ -4620,20 +5162,20 @@ function useAgentRegistry(agentIds, options = {}) {
|
|
|
4620
5162
|
fetchAllAgents();
|
|
4621
5163
|
return () => abortController.abort();
|
|
4622
5164
|
}, [agentIds.join(","), autoFetch]);
|
|
4623
|
-
const getAgent = (0,
|
|
5165
|
+
const getAgent = (0, import_react13.useCallback)(
|
|
4624
5166
|
(agentId) => {
|
|
4625
5167
|
return state.agents[agentId];
|
|
4626
5168
|
},
|
|
4627
5169
|
[state.agents]
|
|
4628
5170
|
);
|
|
4629
|
-
const isAgentReady = (0,
|
|
5171
|
+
const isAgentReady = (0, import_react13.useCallback)(
|
|
4630
5172
|
(agentId) => {
|
|
4631
5173
|
var _a;
|
|
4632
5174
|
return ((_a = state.agents[agentId]) == null ? void 0 : _a.status) === "ready";
|
|
4633
5175
|
},
|
|
4634
5176
|
[state.agents]
|
|
4635
5177
|
);
|
|
4636
|
-
const buildAgentAwarenessInstructions = (0,
|
|
5178
|
+
const buildAgentAwarenessInstructions = (0, import_react13.useCallback)(
|
|
4637
5179
|
(currentAgentId) => {
|
|
4638
5180
|
const otherAgents = agentIds.filter((id) => id !== currentAgentId).map((id) => {
|
|
4639
5181
|
const profile = state.agents[id];
|
|
@@ -4665,13 +5207,13 @@ Example: "I think ${(exampleAgent == null ? void 0 : exampleAgent.name) || "anot
|
|
|
4665
5207
|
},
|
|
4666
5208
|
[agentIds, state.agents, localOverrides]
|
|
4667
5209
|
);
|
|
4668
|
-
const readyAgents = (0,
|
|
5210
|
+
const readyAgents = (0, import_react13.useMemo)(() => {
|
|
4669
5211
|
return agentIds.filter((id) => {
|
|
4670
5212
|
var _a;
|
|
4671
5213
|
return ((_a = state.agents[id]) == null ? void 0 : _a.status) === "ready";
|
|
4672
5214
|
});
|
|
4673
5215
|
}, [agentIds, state.agents]);
|
|
4674
|
-
const agentList = (0,
|
|
5216
|
+
const agentList = (0, import_react13.useMemo)(() => {
|
|
4675
5217
|
return agentIds.map((id) => {
|
|
4676
5218
|
const profile = state.agents[id];
|
|
4677
5219
|
const metadata = profile == null ? void 0 : profile.metadata;
|
|
@@ -4720,15 +5262,15 @@ function extractAgentNameFromMessage(message) {
|
|
|
4720
5262
|
}
|
|
4721
5263
|
|
|
4722
5264
|
// src/AIAgentPanel.tsx
|
|
4723
|
-
var SearchIcon2 = () => /* @__PURE__ */
|
|
4724
|
-
var PlusIcon = () => /* @__PURE__ */
|
|
4725
|
-
var ChevronLeftIcon = () => /* @__PURE__ */
|
|
4726
|
-
var ChevronRightIcon = () => /* @__PURE__ */
|
|
4727
|
-
var MessageIcon = () => /* @__PURE__ */
|
|
4728
|
-
var CloseIcon2 = () => /* @__PURE__ */
|
|
4729
|
-
var LoadingDotIcon = () => /* @__PURE__ */
|
|
4730
|
-
var SidebarIcon = () => /* @__PURE__ */
|
|
4731
|
-
var SparkleIcon = () => /* @__PURE__ */
|
|
5265
|
+
var SearchIcon2 = () => /* @__PURE__ */ import_react14.default.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ import_react14.default.createElement("path", { d: "M7.333 12.667A5.333 5.333 0 1 0 7.333 2a5.333 5.333 0 0 0 0 10.667ZM14 14l-2.9-2.9", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }));
|
|
5266
|
+
var PlusIcon = () => /* @__PURE__ */ import_react14.default.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ import_react14.default.createElement("path", { d: "M8 3.333v9.334M3.333 8h9.334", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }));
|
|
5267
|
+
var ChevronLeftIcon = () => /* @__PURE__ */ import_react14.default.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ import_react14.default.createElement("path", { d: "M10 12L6 8l4-4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }));
|
|
5268
|
+
var ChevronRightIcon = () => /* @__PURE__ */ import_react14.default.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ import_react14.default.createElement("path", { d: "M6 12l4-4-4-4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }));
|
|
5269
|
+
var MessageIcon = () => /* @__PURE__ */ import_react14.default.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ import_react14.default.createElement("path", { d: "M14 10a1.333 1.333 0 0 1-1.333 1.333H4L2 14V3.333A1.333 1.333 0 0 1 3.333 2h9.334A1.333 1.333 0 0 1 14 3.333V10Z", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }));
|
|
5270
|
+
var CloseIcon2 = () => /* @__PURE__ */ import_react14.default.createElement("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ import_react14.default.createElement("path", { d: "M9 3L3 9M3 3l6 6", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }));
|
|
5271
|
+
var LoadingDotIcon = () => /* @__PURE__ */ import_react14.default.createElement("span", { className: "ai-agent-panel__loading-dot" });
|
|
5272
|
+
var SidebarIcon = () => /* @__PURE__ */ import_react14.default.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ import_react14.default.createElement("rect", { x: "2", y: "2", width: "12", height: "12", rx: "2", stroke: "currentColor", strokeWidth: "1.5" }), /* @__PURE__ */ import_react14.default.createElement("path", { d: "M6 2v12", stroke: "currentColor", strokeWidth: "1.5" }));
|
|
5273
|
+
var SparkleIcon = () => /* @__PURE__ */ import_react14.default.createElement("svg", { width: "14", height: "14", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ import_react14.default.createElement("path", { d: "M8 1v3M8 12v3M3 8H0M16 8h-3M12.95 3.05l-2.12 2.12M5.17 10.83l-2.12 2.12M12.95 12.95l-2.12-2.12M5.17 5.17L3.05 3.05", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }), /* @__PURE__ */ import_react14.default.createElement("circle", { cx: "8", cy: "8", r: "2", fill: "currentColor" }));
|
|
4732
5274
|
var normalizeConversationListPayload = (payload) => {
|
|
4733
5275
|
if (!payload) return [];
|
|
4734
5276
|
const conversations = Array.isArray(payload) ? payload : payload.conversations || [];
|
|
@@ -4851,25 +5393,41 @@ var ChatPanelWrapper = ({
|
|
|
4851
5393
|
maxContextTokens,
|
|
4852
5394
|
enableContextDetailView,
|
|
4853
5395
|
onConversationCreated,
|
|
4854
|
-
conversationInitialPrompt
|
|
5396
|
+
conversationInitialPrompt,
|
|
5397
|
+
// New props from ChatPanel port
|
|
5398
|
+
cssUrl,
|
|
5399
|
+
markdownClass,
|
|
5400
|
+
width,
|
|
5401
|
+
height,
|
|
5402
|
+
scrollToEnd,
|
|
5403
|
+
prismStyle,
|
|
5404
|
+
showSaveButton,
|
|
5405
|
+
showEmailButton,
|
|
5406
|
+
messages,
|
|
5407
|
+
showCallToAction,
|
|
5408
|
+
callToActionButtonText,
|
|
5409
|
+
callToActionEmailAddress,
|
|
5410
|
+
callToActionEmailSubject,
|
|
5411
|
+
customerEmailCaptureMode,
|
|
5412
|
+
customerEmailCapturePlaceholder
|
|
4855
5413
|
}) => {
|
|
4856
|
-
var _a, _b;
|
|
5414
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
|
|
4857
5415
|
const convAgentProfile = getAgent(activeConv.agentId);
|
|
4858
5416
|
const convAgentMetadata = convAgentProfile == null ? void 0 : convAgentProfile.metadata;
|
|
4859
5417
|
const isVisible = currentConversationId === activeConv.conversationId;
|
|
4860
|
-
const historyCallback = (0,
|
|
5418
|
+
const historyCallback = (0, import_react14.useCallback)(
|
|
4861
5419
|
(history) => {
|
|
4862
5420
|
handleHistoryChanged(history, activeConv.conversationId);
|
|
4863
5421
|
},
|
|
4864
5422
|
[handleHistoryChanged, activeConv.conversationId]
|
|
4865
5423
|
);
|
|
4866
|
-
const loadingCallback = (0,
|
|
5424
|
+
const loadingCallback = (0, import_react14.useCallback)(
|
|
4867
5425
|
(loading) => {
|
|
4868
5426
|
handleLoadingChange(loading, activeConv.conversationId);
|
|
4869
5427
|
},
|
|
4870
5428
|
[handleLoadingChange, activeConv.conversationId]
|
|
4871
5429
|
);
|
|
4872
|
-
const conversationCreatedCallback = (0,
|
|
5430
|
+
const conversationCreatedCallback = (0, import_react14.useCallback)(
|
|
4873
5431
|
(realConversationId) => {
|
|
4874
5432
|
onConversationCreated(activeConv.conversationId, realConversationId);
|
|
4875
5433
|
},
|
|
@@ -4884,18 +5442,18 @@ var ChatPanelWrapper = ({
|
|
|
4884
5442
|
const prompts = promptsString ? promptsString.split("|").filter((p) => p.trim()) : [];
|
|
4885
5443
|
effectiveFollowOnQuestions = [...prompts];
|
|
4886
5444
|
}
|
|
4887
|
-
const mcpServers = (0,
|
|
5445
|
+
const mcpServers = (0, import_react14.useMemo)(() => {
|
|
4888
5446
|
return (convAgentProfile == null ? void 0 : convAgentProfile.mcpServers) || EMPTY_ARRAY;
|
|
4889
5447
|
}, [convAgentProfile == null ? void 0 : convAgentProfile.mcpServers]);
|
|
4890
5448
|
const effectiveInitialPrompt = conversationInitialPrompt || initialPrompt;
|
|
4891
5449
|
if (!convAgentMetadata) return null;
|
|
4892
|
-
return /* @__PURE__ */
|
|
5450
|
+
return /* @__PURE__ */ import_react14.default.createElement(
|
|
4893
5451
|
"div",
|
|
4894
5452
|
{
|
|
4895
5453
|
className: "ai-agent-panel__chat-wrapper",
|
|
4896
5454
|
style: { display: isVisible ? "flex" : "none" }
|
|
4897
5455
|
},
|
|
4898
|
-
/* @__PURE__ */
|
|
5456
|
+
/* @__PURE__ */ import_react14.default.createElement(
|
|
4899
5457
|
AIChatPanel_default,
|
|
4900
5458
|
{
|
|
4901
5459
|
project_id: convAgentMetadata.projectId,
|
|
@@ -4920,7 +5478,7 @@ var ChatPanelWrapper = ({
|
|
|
4920
5478
|
customer: effectiveCustomer,
|
|
4921
5479
|
showPoweredBy,
|
|
4922
5480
|
showNewConversationButton: false,
|
|
4923
|
-
createConversationOnFirstChat: (_b =
|
|
5481
|
+
createConversationOnFirstChat: (_b = convAgentProfile == null ? void 0 : convAgentProfile.createConversationOnFirstChat) != null ? _b : true,
|
|
4924
5482
|
mcpServers,
|
|
4925
5483
|
actions,
|
|
4926
5484
|
followOnQuestions: effectiveFollowOnQuestions,
|
|
@@ -4935,13 +5493,28 @@ var ChatPanelWrapper = ({
|
|
|
4935
5493
|
totalContextTokens,
|
|
4936
5494
|
maxContextTokens,
|
|
4937
5495
|
enableContextDetailView,
|
|
4938
|
-
onConversationCreated: conversationCreatedCallback
|
|
5496
|
+
onConversationCreated: conversationCreatedCallback,
|
|
5497
|
+
cssUrl,
|
|
5498
|
+
markdownClass,
|
|
5499
|
+
width,
|
|
5500
|
+
height,
|
|
5501
|
+
scrollToEnd: scrollToEnd != null ? scrollToEnd : convAgentMetadata.displayAutoScroll,
|
|
5502
|
+
prismStyle,
|
|
5503
|
+
showSaveButton: (_c = showSaveButton != null ? showSaveButton : convAgentMetadata.displayShowSaveButton) != null ? _c : true,
|
|
5504
|
+
showEmailButton: (_d = showEmailButton != null ? showEmailButton : convAgentMetadata.displayShowEmailButton) != null ? _d : true,
|
|
5505
|
+
messages,
|
|
5506
|
+
showCallToAction: (_e = showCallToAction != null ? showCallToAction : convAgentMetadata.displayShowCallToAction) != null ? _e : false,
|
|
5507
|
+
callToActionButtonText: (_f = callToActionButtonText != null ? callToActionButtonText : convAgentMetadata.displayCallToActionButtonText) != null ? _f : "Submit",
|
|
5508
|
+
callToActionEmailAddress: (_g = callToActionEmailAddress != null ? callToActionEmailAddress : convAgentMetadata.displayCallToActionEmailAddress) != null ? _g : "",
|
|
5509
|
+
callToActionEmailSubject: (_h = callToActionEmailSubject != null ? callToActionEmailSubject : convAgentMetadata.displayCallToActionEmailSubject) != null ? _h : "Agent CTA submitted",
|
|
5510
|
+
customerEmailCaptureMode: (_i = customerEmailCaptureMode != null ? customerEmailCaptureMode : convAgentMetadata == null ? void 0 : convAgentMetadata.customerEmailCaptureMode) != null ? _i : "HIDE",
|
|
5511
|
+
customerEmailCapturePlaceholder: (_j = customerEmailCapturePlaceholder != null ? customerEmailCapturePlaceholder : convAgentMetadata == null ? void 0 : convAgentMetadata.customerEmailCapturePlaceholder) != null ? _j : "Please enter your email..."
|
|
4939
5512
|
}
|
|
4940
5513
|
)
|
|
4941
5514
|
);
|
|
4942
5515
|
};
|
|
4943
5516
|
ChatPanelWrapper.displayName = "ChatPanelWrapper";
|
|
4944
|
-
var AIAgentPanel =
|
|
5517
|
+
var AIAgentPanel = import_react14.default.forwardRef(({
|
|
4945
5518
|
agents,
|
|
4946
5519
|
defaultAgent,
|
|
4947
5520
|
customerId,
|
|
@@ -4980,37 +5553,53 @@ var AIAgentPanel = import_react13.default.forwardRef(({
|
|
|
4980
5553
|
followOnQuestions = [],
|
|
4981
5554
|
followOnPrompt = "",
|
|
4982
5555
|
historyListLimit = 50,
|
|
4983
|
-
showConversationHistory = true
|
|
5556
|
+
showConversationHistory = true,
|
|
5557
|
+
// New props from ChatPanel port
|
|
5558
|
+
cssUrl,
|
|
5559
|
+
markdownClass,
|
|
5560
|
+
width,
|
|
5561
|
+
height,
|
|
5562
|
+
scrollToEnd,
|
|
5563
|
+
prismStyle,
|
|
5564
|
+
showSaveButton,
|
|
5565
|
+
showEmailButton,
|
|
5566
|
+
messages,
|
|
5567
|
+
showCallToAction,
|
|
5568
|
+
callToActionButtonText,
|
|
5569
|
+
callToActionEmailAddress,
|
|
5570
|
+
callToActionEmailSubject,
|
|
5571
|
+
customerEmailCaptureMode,
|
|
5572
|
+
customerEmailCapturePlaceholder
|
|
4984
5573
|
}, ref) => {
|
|
4985
5574
|
var _a, _b, _c, _d;
|
|
4986
|
-
const [isCollapsed, setIsCollapsed] = (0,
|
|
4987
|
-
const [isHistoryCollapsed, setIsHistoryCollapsed] = (0,
|
|
5575
|
+
const [isCollapsed, setIsCollapsed] = (0, import_react14.useState)(collapsible && defaultCollapsed);
|
|
5576
|
+
const [isHistoryCollapsed, setIsHistoryCollapsed] = (0, import_react14.useState)(() => {
|
|
4988
5577
|
if (typeof window !== "undefined") {
|
|
4989
5578
|
const saved = localStorage.getItem("ai-agent-panel-history-collapsed");
|
|
4990
5579
|
return saved === "true";
|
|
4991
5580
|
}
|
|
4992
5581
|
return false;
|
|
4993
5582
|
});
|
|
4994
|
-
const [panelWidth, setPanelWidth] = (0,
|
|
5583
|
+
const [panelWidth, setPanelWidth] = (0, import_react14.useState)(() => {
|
|
4995
5584
|
if (typeof window !== "undefined") {
|
|
4996
5585
|
const savedWidth = localStorage.getItem("ai-agent-panel-width");
|
|
4997
5586
|
if (savedWidth) {
|
|
4998
|
-
const
|
|
4999
|
-
if (
|
|
5000
|
-
return
|
|
5587
|
+
const width2 = parseInt(savedWidth, 10);
|
|
5588
|
+
if (width2 >= minWidth && width2 <= maxWidth) {
|
|
5589
|
+
return width2;
|
|
5001
5590
|
}
|
|
5002
5591
|
}
|
|
5003
5592
|
}
|
|
5004
5593
|
return defaultWidth;
|
|
5005
5594
|
});
|
|
5006
|
-
const [isResizing, setIsResizing] = (0,
|
|
5007
|
-
const [showSearch, setShowSearch] = (0,
|
|
5008
|
-
const [showHandoffDialog, setShowHandoffDialog] = (0,
|
|
5009
|
-
const [suggestedAgent, setSuggestedAgent] = (0,
|
|
5010
|
-
const [handoffSource, setHandoffSource] = (0,
|
|
5011
|
-
const panelRef = (0,
|
|
5012
|
-
const resizeRef = (0,
|
|
5013
|
-
const { agentIds, localOverrides } = (0,
|
|
5595
|
+
const [isResizing, setIsResizing] = (0, import_react14.useState)(false);
|
|
5596
|
+
const [showSearch, setShowSearch] = (0, import_react14.useState)(false);
|
|
5597
|
+
const [showHandoffDialog, setShowHandoffDialog] = (0, import_react14.useState)(false);
|
|
5598
|
+
const [suggestedAgent, setSuggestedAgent] = (0, import_react14.useState)(null);
|
|
5599
|
+
const [handoffSource, setHandoffSource] = (0, import_react14.useState)("agent");
|
|
5600
|
+
const panelRef = (0, import_react14.useRef)(null);
|
|
5601
|
+
const resizeRef = (0, import_react14.useRef)(null);
|
|
5602
|
+
const { agentIds, localOverrides } = (0, import_react14.useMemo)(() => {
|
|
5014
5603
|
const ids = [];
|
|
5015
5604
|
const overrides = {};
|
|
5016
5605
|
for (const agent of agents) {
|
|
@@ -5028,19 +5617,19 @@ var AIAgentPanel = import_react13.default.forwardRef(({
|
|
|
5028
5617
|
}
|
|
5029
5618
|
return { agentIds: ids, localOverrides: overrides };
|
|
5030
5619
|
}, [agents]);
|
|
5031
|
-
const [currentAgentId, setCurrentAgentId] = (0,
|
|
5620
|
+
const [currentAgentId, setCurrentAgentId] = (0, import_react14.useState)(
|
|
5032
5621
|
defaultAgent || agentIds[0] || ""
|
|
5033
5622
|
);
|
|
5034
|
-
const [apiConversations, setApiConversations] = (0,
|
|
5035
|
-
const [conversationsLoading, setConversationsLoading] = (0,
|
|
5036
|
-
const [conversationsError, setConversationsError] = (0,
|
|
5037
|
-
const [searchQuery, setSearchQuery] = (0,
|
|
5038
|
-
const [activeConversations, setActiveConversations] = (0,
|
|
5039
|
-
const [currentConversationId, setCurrentConversationId] = (0,
|
|
5040
|
-
const [conversationFirstPrompts, setConversationFirstPrompts] = (0,
|
|
5041
|
-
const [loadingPrompts, setLoadingPrompts] = (0,
|
|
5042
|
-
const [loadingConversationId, setLoadingConversationId] = (0,
|
|
5043
|
-
const [expandedSections, setExpandedSections] = (0,
|
|
5623
|
+
const [apiConversations, setApiConversations] = (0, import_react14.useState)([]);
|
|
5624
|
+
const [conversationsLoading, setConversationsLoading] = (0, import_react14.useState)(false);
|
|
5625
|
+
const [conversationsError, setConversationsError] = (0, import_react14.useState)(null);
|
|
5626
|
+
const [searchQuery, setSearchQuery] = (0, import_react14.useState)("");
|
|
5627
|
+
const [activeConversations, setActiveConversations] = (0, import_react14.useState)(/* @__PURE__ */ new Map());
|
|
5628
|
+
const [currentConversationId, setCurrentConversationId] = (0, import_react14.useState)(conversation || null);
|
|
5629
|
+
const [conversationFirstPrompts, setConversationFirstPrompts] = (0, import_react14.useState)({});
|
|
5630
|
+
const [loadingPrompts, setLoadingPrompts] = (0, import_react14.useState)(/* @__PURE__ */ new Set());
|
|
5631
|
+
const [loadingConversationId, setLoadingConversationId] = (0, import_react14.useState)(null);
|
|
5632
|
+
const [expandedSections, setExpandedSections] = (0, import_react14.useState)({
|
|
5044
5633
|
"Today": true,
|
|
5045
5634
|
"Yesterday": true,
|
|
5046
5635
|
"This Week": false,
|
|
@@ -5054,16 +5643,16 @@ var AIAgentPanel = import_react13.default.forwardRef(({
|
|
|
5054
5643
|
buildAgentAwarenessInstructions,
|
|
5055
5644
|
agentList
|
|
5056
5645
|
} = useAgentRegistry(agentIds, { url, localOverrides });
|
|
5057
|
-
const fetchInProgressRef = (0,
|
|
5058
|
-
const lastFetchedAgentRef = (0,
|
|
5059
|
-
const checkedPromptsRef = (0,
|
|
5060
|
-
const fetchingPromptsRef = (0,
|
|
5061
|
-
const failedPromptsRef = (0,
|
|
5062
|
-
const activeConversationsRef = (0,
|
|
5646
|
+
const fetchInProgressRef = (0, import_react14.useRef)(false);
|
|
5647
|
+
const lastFetchedAgentRef = (0, import_react14.useRef)(null);
|
|
5648
|
+
const checkedPromptsRef = (0, import_react14.useRef)(/* @__PURE__ */ new Set());
|
|
5649
|
+
const fetchingPromptsRef = (0, import_react14.useRef)(/* @__PURE__ */ new Set());
|
|
5650
|
+
const failedPromptsRef = (0, import_react14.useRef)(/* @__PURE__ */ new Map());
|
|
5651
|
+
const activeConversationsRef = (0, import_react14.useRef)(activeConversations);
|
|
5063
5652
|
activeConversationsRef.current = activeConversations;
|
|
5064
|
-
const currentConversationIdRef = (0,
|
|
5653
|
+
const currentConversationIdRef = (0, import_react14.useRef)(currentConversationId);
|
|
5065
5654
|
currentConversationIdRef.current = currentConversationId;
|
|
5066
|
-
|
|
5655
|
+
import_react14.default.useImperativeHandle(ref, () => ({
|
|
5067
5656
|
startNewConversation: (prompt, agent) => {
|
|
5068
5657
|
const targetAgent = agent || currentAgentId;
|
|
5069
5658
|
const tempId = `new-${Date.now()}`;
|
|
@@ -5086,11 +5675,11 @@ var AIAgentPanel = import_react13.default.forwardRef(({
|
|
|
5086
5675
|
}
|
|
5087
5676
|
}
|
|
5088
5677
|
}), [currentAgentId, onConversationChange]);
|
|
5089
|
-
const [showContextNotification, setShowContextNotification] = (0,
|
|
5090
|
-
const prevContextRef = (0,
|
|
5091
|
-
const contextNotificationTimeoutRef = (0,
|
|
5092
|
-
const prevDefaultAgentRef = (0,
|
|
5093
|
-
const fetchFirstPrompt = (0,
|
|
5678
|
+
const [showContextNotification, setShowContextNotification] = (0, import_react14.useState)(false);
|
|
5679
|
+
const prevContextRef = (0, import_react14.useRef)(null);
|
|
5680
|
+
const contextNotificationTimeoutRef = (0, import_react14.useRef)(null);
|
|
5681
|
+
const prevDefaultAgentRef = (0, import_react14.useRef)(null);
|
|
5682
|
+
const fetchFirstPrompt = (0, import_react14.useCallback)((conversationId, agentIdForConversation) => __async(void 0, null, function* () {
|
|
5094
5683
|
var _a2, _b2;
|
|
5095
5684
|
if (checkedPromptsRef.current.has(conversationId)) {
|
|
5096
5685
|
return;
|
|
@@ -5176,7 +5765,7 @@ var AIAgentPanel = import_react13.default.forwardRef(({
|
|
|
5176
5765
|
});
|
|
5177
5766
|
}
|
|
5178
5767
|
}), [apiKey, currentAgentId, getAgent]);
|
|
5179
|
-
const fetchConversations = (0,
|
|
5768
|
+
const fetchConversations = (0, import_react14.useCallback)((agentId, signal) => __async(void 0, null, function* () {
|
|
5180
5769
|
var _a2;
|
|
5181
5770
|
const agentProfile = getAgent(agentId);
|
|
5182
5771
|
const projectId = (_a2 = agentProfile == null ? void 0 : agentProfile.metadata) == null ? void 0 : _a2.projectId;
|
|
@@ -5232,7 +5821,7 @@ var AIAgentPanel = import_react13.default.forwardRef(({
|
|
|
5232
5821
|
}
|
|
5233
5822
|
}
|
|
5234
5823
|
}), [apiKey, customerId, getAgent, fetchFirstPrompt]);
|
|
5235
|
-
const stripContextFromPrompt = (0,
|
|
5824
|
+
const stripContextFromPrompt = (0, import_react14.useCallback)((prompt) => {
|
|
5236
5825
|
let cleanPrompt = prompt;
|
|
5237
5826
|
const contextIndex = cleanPrompt.indexOf("---context---");
|
|
5238
5827
|
if (contextIndex !== -1) {
|
|
@@ -5248,7 +5837,7 @@ var AIAgentPanel = import_react13.default.forwardRef(({
|
|
|
5248
5837
|
}
|
|
5249
5838
|
return cleanPrompt.trim();
|
|
5250
5839
|
}, []);
|
|
5251
|
-
const loadConversationTranscript = (0,
|
|
5840
|
+
const loadConversationTranscript = (0, import_react14.useCallback)((conversationId, agentIdForConversation, title) => __async(void 0, null, function* () {
|
|
5252
5841
|
var _a2;
|
|
5253
5842
|
const existingActive = activeConversationsRef.current.get(conversationId);
|
|
5254
5843
|
if (existingActive) {
|
|
@@ -5332,10 +5921,10 @@ var AIAgentPanel = import_react13.default.forwardRef(({
|
|
|
5332
5921
|
setLoadingConversationId(null);
|
|
5333
5922
|
}
|
|
5334
5923
|
}), [apiKey, currentAgentId, getAgent, onConversationChange, stripContextFromPrompt]);
|
|
5335
|
-
const handleRefreshConversations = (0,
|
|
5924
|
+
const handleRefreshConversations = (0, import_react14.useCallback)(() => {
|
|
5336
5925
|
fetchConversations(currentAgentId);
|
|
5337
5926
|
}, [currentAgentId, fetchConversations]);
|
|
5338
|
-
(0,
|
|
5927
|
+
(0, import_react14.useEffect)(() => {
|
|
5339
5928
|
var _a2;
|
|
5340
5929
|
if (!showConversationHistory) return;
|
|
5341
5930
|
if (!agentsLoading && currentAgentId && apiKey) {
|
|
@@ -5347,7 +5936,7 @@ var AIAgentPanel = import_react13.default.forwardRef(({
|
|
|
5347
5936
|
}
|
|
5348
5937
|
}
|
|
5349
5938
|
}, [agentsLoading, currentAgentId, apiKey, fetchConversations, getAgent, showConversationHistory]);
|
|
5350
|
-
const handleNewConversation = (0,
|
|
5939
|
+
const handleNewConversation = (0, import_react14.useCallback)(() => {
|
|
5351
5940
|
const tempId = `new-${Date.now()}`;
|
|
5352
5941
|
setActiveConversations((prev) => {
|
|
5353
5942
|
const next = new Map(prev);
|
|
@@ -5364,7 +5953,7 @@ var AIAgentPanel = import_react13.default.forwardRef(({
|
|
|
5364
5953
|
});
|
|
5365
5954
|
setCurrentConversationId(tempId);
|
|
5366
5955
|
}, [currentAgentId]);
|
|
5367
|
-
(0,
|
|
5956
|
+
(0, import_react14.useEffect)(() => {
|
|
5368
5957
|
var _a2;
|
|
5369
5958
|
const agentProfile = getAgent(currentAgentId);
|
|
5370
5959
|
const isAgentReady = (_a2 = agentProfile == null ? void 0 : agentProfile.metadata) == null ? void 0 : _a2.projectId;
|
|
@@ -5372,7 +5961,7 @@ var AIAgentPanel = import_react13.default.forwardRef(({
|
|
|
5372
5961
|
handleNewConversation();
|
|
5373
5962
|
}
|
|
5374
5963
|
}, [currentAgentId, agentsLoading, activeConversations.size, getAgent, handleNewConversation]);
|
|
5375
|
-
const handleCloseConversation = (0,
|
|
5964
|
+
const handleCloseConversation = (0, import_react14.useCallback)((conversationId, e) => {
|
|
5376
5965
|
var _a2;
|
|
5377
5966
|
if (e) {
|
|
5378
5967
|
e.stopPropagation();
|
|
@@ -5388,10 +5977,10 @@ var AIAgentPanel = import_react13.default.forwardRef(({
|
|
|
5388
5977
|
setCurrentConversationId(nextId);
|
|
5389
5978
|
}
|
|
5390
5979
|
}, []);
|
|
5391
|
-
const handleSelectConversation = (0,
|
|
5980
|
+
const handleSelectConversation = (0, import_react14.useCallback)((conversationId) => {
|
|
5392
5981
|
loadConversationTranscript(conversationId);
|
|
5393
5982
|
}, [loadConversationTranscript]);
|
|
5394
|
-
const toggleSection = (0,
|
|
5983
|
+
const toggleSection = (0, import_react14.useCallback)((sectionLabel) => {
|
|
5395
5984
|
setExpandedSections((prev) => {
|
|
5396
5985
|
const isExpanding = !prev[sectionLabel];
|
|
5397
5986
|
if (isExpanding) {
|
|
@@ -5425,7 +6014,7 @@ var AIAgentPanel = import_react13.default.forwardRef(({
|
|
|
5425
6014
|
});
|
|
5426
6015
|
});
|
|
5427
6016
|
}, [apiConversations, fetchFirstPrompt]);
|
|
5428
|
-
const groupedConversations = (0,
|
|
6017
|
+
const groupedConversations = (0, import_react14.useMemo)(() => {
|
|
5429
6018
|
let filtered = apiConversations;
|
|
5430
6019
|
if (searchQuery) {
|
|
5431
6020
|
const query = searchQuery.toLowerCase();
|
|
@@ -5440,12 +6029,12 @@ var AIAgentPanel = import_react13.default.forwardRef(({
|
|
|
5440
6029
|
}
|
|
5441
6030
|
return groupConversationsByTime(filtered, true);
|
|
5442
6031
|
}, [apiConversations, searchQuery, conversationFirstPrompts]);
|
|
5443
|
-
const effectiveCustomer = (0,
|
|
6032
|
+
const effectiveCustomer = (0, import_react14.useMemo)(() => {
|
|
5444
6033
|
return __spreadProps(__spreadValues({}, customer), {
|
|
5445
6034
|
customer_id: customerId
|
|
5446
6035
|
});
|
|
5447
6036
|
}, [customer, customerId]);
|
|
5448
|
-
const handleResizeStart = (0,
|
|
6037
|
+
const handleResizeStart = (0, import_react14.useCallback)((e) => {
|
|
5449
6038
|
e.preventDefault();
|
|
5450
6039
|
setIsResizing(true);
|
|
5451
6040
|
let currentWidth = panelWidth;
|
|
@@ -5465,18 +6054,18 @@ var AIAgentPanel = import_react13.default.forwardRef(({
|
|
|
5465
6054
|
document.addEventListener("mousemove", handleMouseMove);
|
|
5466
6055
|
document.addEventListener("mouseup", handleMouseUp);
|
|
5467
6056
|
}, [panelWidth, minWidth, maxWidth, position]);
|
|
5468
|
-
const currentAgentProfile = (0,
|
|
6057
|
+
const currentAgentProfile = (0, import_react14.useMemo)(() => {
|
|
5469
6058
|
return getAgent(currentAgentId);
|
|
5470
6059
|
}, [currentAgentId, getAgent]);
|
|
5471
6060
|
const currentAgentMetadata = currentAgentProfile == null ? void 0 : currentAgentProfile.metadata;
|
|
5472
|
-
const currentActiveConversation = (0,
|
|
6061
|
+
const currentActiveConversation = (0, import_react14.useMemo)(() => {
|
|
5473
6062
|
if (!currentConversationId) return null;
|
|
5474
6063
|
return activeConversations.get(currentConversationId) || null;
|
|
5475
6064
|
}, [currentConversationId, activeConversations]);
|
|
5476
|
-
const activeConversationsList = (0,
|
|
6065
|
+
const activeConversationsList = (0, import_react14.useMemo)(() => {
|
|
5477
6066
|
return Array.from(activeConversations.values());
|
|
5478
6067
|
}, [activeConversations]);
|
|
5479
|
-
const agentOptions = (0,
|
|
6068
|
+
const agentOptions = (0, import_react14.useMemo)(() => {
|
|
5480
6069
|
return agentList.map((agent) => ({
|
|
5481
6070
|
value: agent.id,
|
|
5482
6071
|
label: agent.name,
|
|
@@ -5484,7 +6073,7 @@ var AIAgentPanel = import_react13.default.forwardRef(({
|
|
|
5484
6073
|
avatarUrl: agent.avatarUrl
|
|
5485
6074
|
}));
|
|
5486
6075
|
}, [agentList]);
|
|
5487
|
-
const mergedContext = (0,
|
|
6076
|
+
const mergedContext = (0, import_react14.useMemo)(() => {
|
|
5488
6077
|
const sections = [
|
|
5489
6078
|
...sharedContextSections,
|
|
5490
6079
|
...pageContextSections,
|
|
@@ -5506,7 +6095,7 @@ var AIAgentPanel = import_react13.default.forwardRef(({
|
|
|
5506
6095
|
totalTokens
|
|
5507
6096
|
};
|
|
5508
6097
|
}, [context, sharedContextSections, pageContextSections, contextDataSources]);
|
|
5509
|
-
(0,
|
|
6098
|
+
(0, import_react14.useEffect)(() => {
|
|
5510
6099
|
const contextString = JSON.stringify(mergedContext.sections.map((s) => ({ id: s.id, data: s.data })));
|
|
5511
6100
|
if (prevContextRef.current === null) {
|
|
5512
6101
|
prevContextRef.current = contextString;
|
|
@@ -5526,14 +6115,14 @@ var AIAgentPanel = import_react13.default.forwardRef(({
|
|
|
5526
6115
|
}, 3e3);
|
|
5527
6116
|
}
|
|
5528
6117
|
}, [mergedContext.sections]);
|
|
5529
|
-
(0,
|
|
6118
|
+
(0, import_react14.useEffect)(() => {
|
|
5530
6119
|
return () => {
|
|
5531
6120
|
if (contextNotificationTimeoutRef.current) {
|
|
5532
6121
|
clearTimeout(contextNotificationTimeoutRef.current);
|
|
5533
6122
|
}
|
|
5534
6123
|
};
|
|
5535
6124
|
}, []);
|
|
5536
|
-
(0,
|
|
6125
|
+
(0, import_react14.useEffect)(() => {
|
|
5537
6126
|
var _a2, _b2;
|
|
5538
6127
|
let foundDefaultAgent = null;
|
|
5539
6128
|
for (const section of pageContextSections) {
|
|
@@ -5580,7 +6169,7 @@ var AIAgentPanel = import_react13.default.forwardRef(({
|
|
|
5580
6169
|
});
|
|
5581
6170
|
}
|
|
5582
6171
|
}, [pageContextSections, currentAgentId, agentIds, getAgent, localOverrides]);
|
|
5583
|
-
const chatPanelData = (0,
|
|
6172
|
+
const chatPanelData = (0, import_react14.useMemo)(() => {
|
|
5584
6173
|
const contextData = mergedContext.sections.map((section) => ({
|
|
5585
6174
|
key: section.id,
|
|
5586
6175
|
data: JSON.stringify(section.data)
|
|
@@ -5596,7 +6185,7 @@ var AIAgentPanel = import_react13.default.forwardRef(({
|
|
|
5596
6185
|
}
|
|
5597
6186
|
return [...data, ...contextData];
|
|
5598
6187
|
}, [data, mergedContext.sections, buildAgentAwarenessInstructions, currentAgentId, enableAgentSuggestions]);
|
|
5599
|
-
const handleAgentSwitch = (0,
|
|
6188
|
+
const handleAgentSwitch = (0, import_react14.useCallback)(
|
|
5600
6189
|
(newAgentId) => {
|
|
5601
6190
|
const oldAgentId = currentAgentId;
|
|
5602
6191
|
setCurrentAgentId(newAgentId);
|
|
@@ -5619,7 +6208,7 @@ var AIAgentPanel = import_react13.default.forwardRef(({
|
|
|
5619
6208
|
},
|
|
5620
6209
|
[currentAgentId, onAgentSwitch]
|
|
5621
6210
|
);
|
|
5622
|
-
const handleConversationSelect = (0,
|
|
6211
|
+
const handleConversationSelect = (0, import_react14.useCallback)(
|
|
5623
6212
|
(conv) => {
|
|
5624
6213
|
let agentIdToUse = conv.agentId || currentAgentId;
|
|
5625
6214
|
const targetAgent = getAgent(agentIdToUse);
|
|
@@ -5645,7 +6234,7 @@ var AIAgentPanel = import_react13.default.forwardRef(({
|
|
|
5645
6234
|
},
|
|
5646
6235
|
[currentAgentId, loadConversationTranscript, getAgent, agentList, conversationFirstPrompts]
|
|
5647
6236
|
);
|
|
5648
|
-
const handleHistoryChanged = (0,
|
|
6237
|
+
const handleHistoryChanged = (0, import_react14.useCallback)(
|
|
5649
6238
|
(history, conversationId) => {
|
|
5650
6239
|
const targetConversationId = conversationId || currentConversationIdRef.current;
|
|
5651
6240
|
if (targetConversationId) {
|
|
@@ -5697,7 +6286,7 @@ var AIAgentPanel = import_react13.default.forwardRef(({
|
|
|
5697
6286
|
agents
|
|
5698
6287
|
]
|
|
5699
6288
|
);
|
|
5700
|
-
const handleLoadingChange = (0,
|
|
6289
|
+
const handleLoadingChange = (0, import_react14.useCallback)((isLoading, conversationId) => {
|
|
5701
6290
|
const targetConversationId = conversationId || currentConversationIdRef.current;
|
|
5702
6291
|
if (targetConversationId) {
|
|
5703
6292
|
setActiveConversations((prev) => {
|
|
@@ -5713,7 +6302,7 @@ var AIAgentPanel = import_react13.default.forwardRef(({
|
|
|
5713
6302
|
});
|
|
5714
6303
|
}
|
|
5715
6304
|
}, []);
|
|
5716
|
-
const handleHandoffConfirm = (0,
|
|
6305
|
+
const handleHandoffConfirm = (0, import_react14.useCallback)(() => {
|
|
5717
6306
|
if (suggestedAgent) {
|
|
5718
6307
|
handleAgentSwitch(suggestedAgent);
|
|
5719
6308
|
}
|
|
@@ -5721,12 +6310,12 @@ var AIAgentPanel = import_react13.default.forwardRef(({
|
|
|
5721
6310
|
setSuggestedAgent(null);
|
|
5722
6311
|
setHandoffSource("agent");
|
|
5723
6312
|
}, [suggestedAgent, handleAgentSwitch]);
|
|
5724
|
-
const handleHandoffCancel = (0,
|
|
6313
|
+
const handleHandoffCancel = (0, import_react14.useCallback)(() => {
|
|
5725
6314
|
setShowHandoffDialog(false);
|
|
5726
6315
|
setSuggestedAgent(null);
|
|
5727
6316
|
setHandoffSource("agent");
|
|
5728
6317
|
}, []);
|
|
5729
|
-
const handleConversationCreated = (0,
|
|
6318
|
+
const handleConversationCreated = (0, import_react14.useCallback)((tempId, realId) => {
|
|
5730
6319
|
console.log("Conversation created:", tempId, "->", realId);
|
|
5731
6320
|
setActiveConversations((prev) => {
|
|
5732
6321
|
const existing = prev.get(tempId);
|
|
@@ -5747,11 +6336,11 @@ var AIAgentPanel = import_react13.default.forwardRef(({
|
|
|
5747
6336
|
}
|
|
5748
6337
|
}
|
|
5749
6338
|
}, [onConversationChange]);
|
|
5750
|
-
const toggleCollapse = (0,
|
|
6339
|
+
const toggleCollapse = (0, import_react14.useCallback)(() => {
|
|
5751
6340
|
if (!collapsible) return;
|
|
5752
6341
|
setIsCollapsed((prev) => !prev);
|
|
5753
6342
|
}, [collapsible]);
|
|
5754
|
-
const toggleHistoryCollapse = (0,
|
|
6343
|
+
const toggleHistoryCollapse = (0, import_react14.useCallback)(() => {
|
|
5755
6344
|
setIsHistoryCollapsed((prev) => {
|
|
5756
6345
|
const next = !prev;
|
|
5757
6346
|
localStorage.setItem("ai-agent-panel-history-collapsed", String(next));
|
|
@@ -5767,7 +6356,7 @@ var AIAgentPanel = import_react13.default.forwardRef(({
|
|
|
5767
6356
|
!showConversationHistory ? "ai-agent-panel--no-history" : ""
|
|
5768
6357
|
].filter(Boolean).join(" ");
|
|
5769
6358
|
if (collapsible && isCollapsed) {
|
|
5770
|
-
return /* @__PURE__ */
|
|
6359
|
+
return /* @__PURE__ */ import_react14.default.createElement("div", { className: panelClasses, ref: panelRef }, /* @__PURE__ */ import_react14.default.createElement(
|
|
5771
6360
|
"div",
|
|
5772
6361
|
{
|
|
5773
6362
|
className: "ai-agent-panel__collapsed-bar",
|
|
@@ -5778,9 +6367,9 @@ var AIAgentPanel = import_react13.default.forwardRef(({
|
|
|
5778
6367
|
},
|
|
5779
6368
|
title: "Click to expand"
|
|
5780
6369
|
},
|
|
5781
|
-
/* @__PURE__ */
|
|
5782
|
-
/* @__PURE__ */
|
|
5783
|
-
showConversationHistory && /* @__PURE__ */
|
|
6370
|
+
/* @__PURE__ */ import_react14.default.createElement(Tooltip, { content: "Expand Panel", side: "left" }, /* @__PURE__ */ import_react14.default.createElement(Button, { variant: "ghost", size: "icon", onClick: toggleCollapse }, position === "right" ? /* @__PURE__ */ import_react14.default.createElement(ChevronLeftIcon, null) : /* @__PURE__ */ import_react14.default.createElement(ChevronRightIcon, null))),
|
|
6371
|
+
/* @__PURE__ */ import_react14.default.createElement("div", { className: "ai-agent-panel__collapsed-divider" }),
|
|
6372
|
+
showConversationHistory && /* @__PURE__ */ import_react14.default.createElement(Tooltip, { content: "Search", side: "left" }, /* @__PURE__ */ import_react14.default.createElement(
|
|
5784
6373
|
Button,
|
|
5785
6374
|
{
|
|
5786
6375
|
variant: "ghost",
|
|
@@ -5790,9 +6379,9 @@ var AIAgentPanel = import_react13.default.forwardRef(({
|
|
|
5790
6379
|
setShowSearch(true);
|
|
5791
6380
|
}
|
|
5792
6381
|
},
|
|
5793
|
-
/* @__PURE__ */
|
|
6382
|
+
/* @__PURE__ */ import_react14.default.createElement(SearchIcon2, null)
|
|
5794
6383
|
)),
|
|
5795
|
-
/* @__PURE__ */
|
|
6384
|
+
/* @__PURE__ */ import_react14.default.createElement(Tooltip, { content: "New Chat", side: "left" }, /* @__PURE__ */ import_react14.default.createElement(
|
|
5796
6385
|
Button,
|
|
5797
6386
|
{
|
|
5798
6387
|
variant: "ghost",
|
|
@@ -5802,15 +6391,15 @@ var AIAgentPanel = import_react13.default.forwardRef(({
|
|
|
5802
6391
|
handleNewConversation();
|
|
5803
6392
|
}
|
|
5804
6393
|
},
|
|
5805
|
-
/* @__PURE__ */
|
|
6394
|
+
/* @__PURE__ */ import_react14.default.createElement(PlusIcon, null)
|
|
5806
6395
|
)),
|
|
5807
|
-
/* @__PURE__ */
|
|
6396
|
+
/* @__PURE__ */ import_react14.default.createElement("div", { className: "ai-agent-panel__collapsed-divider" }),
|
|
5808
6397
|
agentList.map((agent) => {
|
|
5809
6398
|
const activeConvForAgent = activeConversationsList.find(
|
|
5810
6399
|
(conv) => conv.agentId === agent.id
|
|
5811
6400
|
);
|
|
5812
6401
|
const hasActiveConversation = !!activeConvForAgent;
|
|
5813
|
-
return /* @__PURE__ */
|
|
6402
|
+
return /* @__PURE__ */ import_react14.default.createElement(Tooltip, { key: agent.id, content: agent.name, side: "left" }, /* @__PURE__ */ import_react14.default.createElement(
|
|
5814
6403
|
Button,
|
|
5815
6404
|
{
|
|
5816
6405
|
variant: agent.id === currentAgentId ? "secondary" : "ghost",
|
|
@@ -5844,7 +6433,7 @@ var AIAgentPanel = import_react13.default.forwardRef(({
|
|
|
5844
6433
|
},
|
|
5845
6434
|
className: `ai-agent-panel__agent-icon ${hasActiveConversation ? "ai-agent-panel__agent-icon--active" : ""}`
|
|
5846
6435
|
},
|
|
5847
|
-
agent.avatarUrl ? /* @__PURE__ */
|
|
6436
|
+
agent.avatarUrl ? /* @__PURE__ */ import_react14.default.createElement(
|
|
5848
6437
|
"img",
|
|
5849
6438
|
{
|
|
5850
6439
|
src: agent.avatarUrl,
|
|
@@ -5852,20 +6441,20 @@ var AIAgentPanel = import_react13.default.forwardRef(({
|
|
|
5852
6441
|
className: "ai-agent-panel__agent-avatar"
|
|
5853
6442
|
}
|
|
5854
6443
|
) : agent.name.charAt(0).toUpperCase(),
|
|
5855
|
-
hasActiveConversation && /* @__PURE__ */
|
|
6444
|
+
hasActiveConversation && /* @__PURE__ */ import_react14.default.createElement("span", { className: "ai-agent-panel__agent-active-indicator" })
|
|
5856
6445
|
));
|
|
5857
6446
|
}),
|
|
5858
|
-
/* @__PURE__ */
|
|
6447
|
+
/* @__PURE__ */ import_react14.default.createElement("div", { className: "ai-agent-panel__collapsed-spacer" })
|
|
5859
6448
|
));
|
|
5860
6449
|
}
|
|
5861
|
-
return /* @__PURE__ */
|
|
6450
|
+
return /* @__PURE__ */ import_react14.default.createElement(
|
|
5862
6451
|
"div",
|
|
5863
6452
|
{
|
|
5864
6453
|
className: panelClasses,
|
|
5865
6454
|
ref: panelRef,
|
|
5866
6455
|
style: { width: `${panelWidth}px` }
|
|
5867
6456
|
},
|
|
5868
|
-
/* @__PURE__ */
|
|
6457
|
+
/* @__PURE__ */ import_react14.default.createElement(
|
|
5869
6458
|
"div",
|
|
5870
6459
|
{
|
|
5871
6460
|
ref: resizeRef,
|
|
@@ -5877,9 +6466,9 @@ var AIAgentPanel = import_react13.default.forwardRef(({
|
|
|
5877
6466
|
tabIndex: 0
|
|
5878
6467
|
}
|
|
5879
6468
|
),
|
|
5880
|
-
showConversationHistory && /* @__PURE__ */
|
|
6469
|
+
showConversationHistory && /* @__PURE__ */ import_react14.default.createElement("div", { className: `ai-agent-panel__sidebar ${isHistoryCollapsed ? "ai-agent-panel__sidebar--collapsed" : ""}` }, isHistoryCollapsed ? (
|
|
5881
6470
|
// Collapsed history bar
|
|
5882
|
-
/* @__PURE__ */
|
|
6471
|
+
/* @__PURE__ */ import_react14.default.createElement(
|
|
5883
6472
|
"div",
|
|
5884
6473
|
{
|
|
5885
6474
|
className: "ai-agent-panel__history-collapsed-bar",
|
|
@@ -5890,32 +6479,32 @@ var AIAgentPanel = import_react13.default.forwardRef(({
|
|
|
5890
6479
|
},
|
|
5891
6480
|
title: "Click to expand history"
|
|
5892
6481
|
},
|
|
5893
|
-
/* @__PURE__ */
|
|
6482
|
+
/* @__PURE__ */ import_react14.default.createElement(Tooltip, { content: "Expand History", side: sidebarPosition === "left" ? "right" : "left" }, /* @__PURE__ */ import_react14.default.createElement(
|
|
5894
6483
|
Button,
|
|
5895
6484
|
{
|
|
5896
6485
|
variant: "ghost",
|
|
5897
6486
|
size: "icon",
|
|
5898
6487
|
onClick: toggleHistoryCollapse
|
|
5899
6488
|
},
|
|
5900
|
-
/* @__PURE__ */
|
|
6489
|
+
/* @__PURE__ */ import_react14.default.createElement(ChevronRightIcon, null)
|
|
5901
6490
|
)),
|
|
5902
|
-
/* @__PURE__ */
|
|
5903
|
-
/* @__PURE__ */
|
|
6491
|
+
/* @__PURE__ */ import_react14.default.createElement("div", { className: "ai-agent-panel__collapsed-divider" }),
|
|
6492
|
+
/* @__PURE__ */ import_react14.default.createElement(Tooltip, { content: "New Chat", side: sidebarPosition === "left" ? "right" : "left" }, /* @__PURE__ */ import_react14.default.createElement(
|
|
5904
6493
|
Button,
|
|
5905
6494
|
{
|
|
5906
6495
|
variant: "ghost",
|
|
5907
6496
|
size: "icon",
|
|
5908
6497
|
onClick: handleNewConversation
|
|
5909
6498
|
},
|
|
5910
|
-
/* @__PURE__ */
|
|
6499
|
+
/* @__PURE__ */ import_react14.default.createElement(PlusIcon, null)
|
|
5911
6500
|
)),
|
|
5912
|
-
/* @__PURE__ */
|
|
6501
|
+
/* @__PURE__ */ import_react14.default.createElement("div", { className: "ai-agent-panel__collapsed-divider" }),
|
|
5913
6502
|
agentList.map((agent) => {
|
|
5914
6503
|
const activeConvForAgent = activeConversationsList.find(
|
|
5915
6504
|
(conv) => conv.agentId === agent.id
|
|
5916
6505
|
);
|
|
5917
6506
|
const hasActiveConversation = !!activeConvForAgent;
|
|
5918
|
-
return /* @__PURE__ */
|
|
6507
|
+
return /* @__PURE__ */ import_react14.default.createElement(Tooltip, { key: agent.id, content: agent.name, side: sidebarPosition === "left" ? "right" : "left" }, /* @__PURE__ */ import_react14.default.createElement(
|
|
5919
6508
|
Button,
|
|
5920
6509
|
{
|
|
5921
6510
|
variant: agent.id === currentAgentId ? "secondary" : "ghost",
|
|
@@ -5948,7 +6537,7 @@ var AIAgentPanel = import_react13.default.forwardRef(({
|
|
|
5948
6537
|
},
|
|
5949
6538
|
className: `ai-agent-panel__agent-icon ${hasActiveConversation ? "ai-agent-panel__agent-icon--active" : ""}`
|
|
5950
6539
|
},
|
|
5951
|
-
agent.avatarUrl ? /* @__PURE__ */
|
|
6540
|
+
agent.avatarUrl ? /* @__PURE__ */ import_react14.default.createElement(
|
|
5952
6541
|
"img",
|
|
5953
6542
|
{
|
|
5954
6543
|
src: agent.avatarUrl,
|
|
@@ -5956,40 +6545,40 @@ var AIAgentPanel = import_react13.default.forwardRef(({
|
|
|
5956
6545
|
className: "ai-agent-panel__agent-avatar"
|
|
5957
6546
|
}
|
|
5958
6547
|
) : agent.name.charAt(0).toUpperCase(),
|
|
5959
|
-
hasActiveConversation && /* @__PURE__ */
|
|
6548
|
+
hasActiveConversation && /* @__PURE__ */ import_react14.default.createElement("span", { className: "ai-agent-panel__agent-active-indicator" })
|
|
5960
6549
|
));
|
|
5961
6550
|
}),
|
|
5962
|
-
/* @__PURE__ */
|
|
6551
|
+
/* @__PURE__ */ import_react14.default.createElement("div", { className: "ai-agent-panel__history-collapsed-spacer" })
|
|
5963
6552
|
)
|
|
5964
|
-
) : /* @__PURE__ */
|
|
6553
|
+
) : /* @__PURE__ */ import_react14.default.createElement(import_react14.default.Fragment, null, /* @__PURE__ */ import_react14.default.createElement("div", { className: "ai-agent-panel__header" }, /* @__PURE__ */ import_react14.default.createElement("div", { className: "ai-agent-panel__header-actions" }, showSearch ? /* @__PURE__ */ import_react14.default.createElement(
|
|
5965
6554
|
Input,
|
|
5966
6555
|
{
|
|
5967
6556
|
placeholder: "Search conversations...",
|
|
5968
6557
|
value: searchQuery,
|
|
5969
6558
|
onChange: (e) => setSearchQuery(e.target.value),
|
|
5970
|
-
icon: /* @__PURE__ */
|
|
6559
|
+
icon: /* @__PURE__ */ import_react14.default.createElement(SearchIcon2, null),
|
|
5971
6560
|
autoFocus: true,
|
|
5972
6561
|
onBlur: () => {
|
|
5973
6562
|
if (!searchQuery) setShowSearch(false);
|
|
5974
6563
|
}
|
|
5975
6564
|
}
|
|
5976
|
-
) : /* @__PURE__ */
|
|
6565
|
+
) : /* @__PURE__ */ import_react14.default.createElement(import_react14.default.Fragment, null, /* @__PURE__ */ import_react14.default.createElement(
|
|
5977
6566
|
Button,
|
|
5978
6567
|
{
|
|
5979
6568
|
variant: "ghost",
|
|
5980
6569
|
size: "icon",
|
|
5981
6570
|
onClick: () => setShowSearch(true)
|
|
5982
6571
|
},
|
|
5983
|
-
/* @__PURE__ */
|
|
5984
|
-
), /* @__PURE__ */
|
|
6572
|
+
/* @__PURE__ */ import_react14.default.createElement(SearchIcon2, null)
|
|
6573
|
+
), /* @__PURE__ */ import_react14.default.createElement(
|
|
5985
6574
|
Button,
|
|
5986
6575
|
{
|
|
5987
6576
|
variant: "ghost",
|
|
5988
6577
|
size: "icon",
|
|
5989
6578
|
onClick: handleNewConversation
|
|
5990
6579
|
},
|
|
5991
|
-
/* @__PURE__ */
|
|
5992
|
-
))), /* @__PURE__ */
|
|
6580
|
+
/* @__PURE__ */ import_react14.default.createElement(PlusIcon, null)
|
|
6581
|
+
))), /* @__PURE__ */ import_react14.default.createElement(Tooltip, { content: "Collapse History", side: "bottom" }, /* @__PURE__ */ import_react14.default.createElement(Button, { variant: "ghost", size: "icon", onClick: toggleHistoryCollapse }, /* @__PURE__ */ import_react14.default.createElement(SidebarIcon, null))), collapsible && /* @__PURE__ */ import_react14.default.createElement(Button, { variant: "ghost", size: "icon", onClick: toggleCollapse }, position === "right" ? /* @__PURE__ */ import_react14.default.createElement(ChevronRightIcon, null) : /* @__PURE__ */ import_react14.default.createElement(ChevronLeftIcon, null))), /* @__PURE__ */ import_react14.default.createElement(ScrollArea, { className: "ai-agent-panel__conversations" }, activeConversationsList.length > 0 && /* @__PURE__ */ import_react14.default.createElement("div", { className: "ai-agent-panel__group ai-agent-panel__group--active" }, /* @__PURE__ */ import_react14.default.createElement("div", { className: "ai-agent-panel__group-label" }, /* @__PURE__ */ import_react14.default.createElement("span", null, "Active (", activeConversationsList.length, ")")), activeConversationsList.map((activeConv) => /* @__PURE__ */ import_react14.default.createElement(
|
|
5993
6582
|
"div",
|
|
5994
6583
|
{
|
|
5995
6584
|
key: activeConv.stableKey,
|
|
@@ -6001,37 +6590,37 @@ var AIAgentPanel = import_react13.default.forwardRef(({
|
|
|
6001
6590
|
}
|
|
6002
6591
|
}
|
|
6003
6592
|
},
|
|
6004
|
-
/* @__PURE__ */
|
|
6005
|
-
/* @__PURE__ */
|
|
6593
|
+
/* @__PURE__ */ import_react14.default.createElement("div", { className: "ai-agent-panel__conversation-content" }, /* @__PURE__ */ import_react14.default.createElement("div", { className: "ai-agent-panel__conversation-title" }, activeConv.isLoading && /* @__PURE__ */ import_react14.default.createElement(LoadingDotIcon, null), /* @__PURE__ */ import_react14.default.createElement("span", null, activeConv.title))),
|
|
6594
|
+
/* @__PURE__ */ import_react14.default.createElement(
|
|
6006
6595
|
"button",
|
|
6007
6596
|
{
|
|
6008
6597
|
className: "ai-agent-panel__conversation-close",
|
|
6009
6598
|
onClick: (e) => handleCloseConversation(activeConv.conversationId, e),
|
|
6010
6599
|
title: "Close conversation"
|
|
6011
6600
|
},
|
|
6012
|
-
/* @__PURE__ */
|
|
6601
|
+
/* @__PURE__ */ import_react14.default.createElement(CloseIcon2, null)
|
|
6013
6602
|
)
|
|
6014
|
-
))), conversationsLoading ? /* @__PURE__ */
|
|
6603
|
+
))), conversationsLoading ? /* @__PURE__ */ import_react14.default.createElement("div", { className: "ai-agent-panel__loading" }, /* @__PURE__ */ import_react14.default.createElement("div", { className: "ai-agent-panel__loading-spinner" }), /* @__PURE__ */ import_react14.default.createElement("span", null, "Loading conversations...")) : conversationsError ? /* @__PURE__ */ import_react14.default.createElement("div", { className: "ai-agent-panel__empty" }, /* @__PURE__ */ import_react14.default.createElement("p", null, "Error: ", conversationsError), /* @__PURE__ */ import_react14.default.createElement(Button, { variant: "secondary", size: "sm", onClick: handleRefreshConversations }, "Retry")) : groupedConversations.length === 0 && activeConversationsList.length === 0 ? /* @__PURE__ */ import_react14.default.createElement("div", { className: "ai-agent-panel__empty" }, /* @__PURE__ */ import_react14.default.createElement(MessageIcon, null), /* @__PURE__ */ import_react14.default.createElement("p", null, "No conversations yet"), /* @__PURE__ */ import_react14.default.createElement("p", { className: "ai-agent-panel__empty-hint" }, "Start chatting to create your first conversation")) : /* @__PURE__ */ import_react14.default.createElement(import_react14.default.Fragment, null, activeConversationsList.length > 0 && groupedConversations.some((g) => g.count > 0) && /* @__PURE__ */ import_react14.default.createElement("div", { className: "ai-agent-panel__group-divider" }), groupedConversations.map((group) => /* @__PURE__ */ import_react14.default.createElement("div", { key: group.label, className: "ai-agent-panel__group" }, /* @__PURE__ */ import_react14.default.createElement(
|
|
6015
6604
|
"div",
|
|
6016
6605
|
{
|
|
6017
6606
|
className: "ai-agent-panel__group-label ai-agent-panel__group-label--clickable",
|
|
6018
6607
|
onClick: () => toggleSection(group.label)
|
|
6019
6608
|
},
|
|
6020
|
-
/* @__PURE__ */
|
|
6021
|
-
/* @__PURE__ */
|
|
6609
|
+
/* @__PURE__ */ import_react14.default.createElement("span", null, group.label, " ", group.count > 0 && `(${group.count})`),
|
|
6610
|
+
/* @__PURE__ */ import_react14.default.createElement("span", { className: "ai-agent-panel__group-chevron" }, expandedSections[group.label] ? "\u25BC" : "\u25B6")
|
|
6022
6611
|
), expandedSections[group.label] && group.conversations.length > 0 && group.conversations.map((conv) => {
|
|
6023
6612
|
const isActive = activeConversations.has(conv.conversationId);
|
|
6024
|
-
return /* @__PURE__ */
|
|
6613
|
+
return /* @__PURE__ */ import_react14.default.createElement(
|
|
6025
6614
|
"div",
|
|
6026
6615
|
{
|
|
6027
6616
|
key: conv.conversationId,
|
|
6028
6617
|
className: `ai-agent-panel__conversation ${currentConversationId === conv.conversationId ? "ai-agent-panel__conversation--current" : ""} ${isActive ? "ai-agent-panel__conversation--in-active" : ""}`,
|
|
6029
6618
|
onClick: () => handleConversationSelect(conv)
|
|
6030
6619
|
},
|
|
6031
|
-
/* @__PURE__ */
|
|
6620
|
+
/* @__PURE__ */ import_react14.default.createElement("div", { className: "ai-agent-panel__conversation-content" }, /* @__PURE__ */ import_react14.default.createElement("div", { className: "ai-agent-panel__conversation-title" }, isActive && /* @__PURE__ */ import_react14.default.createElement("span", { className: "ai-agent-panel__active-badge" }, "\u25CF"), conversationFirstPrompts[conv.conversationId] || conv.title))
|
|
6032
6621
|
);
|
|
6033
6622
|
}))))))),
|
|
6034
|
-
/* @__PURE__ */
|
|
6623
|
+
/* @__PURE__ */ import_react14.default.createElement("div", { className: "ai-agent-panel__chat" }, !showConversationHistory && collapsible && /* @__PURE__ */ import_react14.default.createElement("div", { className: "ai-agent-panel__chat-header" }, /* @__PURE__ */ import_react14.default.createElement("div", { className: "ai-agent-panel__chat-header-spacer" }), /* @__PURE__ */ import_react14.default.createElement(Tooltip, { content: "Collapse Panel", side: position === "right" ? "left" : "right" }, /* @__PURE__ */ import_react14.default.createElement(Button, { variant: "ghost", size: "icon", onClick: toggleCollapse }, position === "right" ? /* @__PURE__ */ import_react14.default.createElement(ChevronRightIcon, null) : /* @__PURE__ */ import_react14.default.createElement(ChevronLeftIcon, null)))), showContextNotification && /* @__PURE__ */ import_react14.default.createElement("div", { className: "ai-agent-panel__context-notification" }, /* @__PURE__ */ import_react14.default.createElement(SparkleIcon, null), /* @__PURE__ */ import_react14.default.createElement("span", null, "Agent now has new context")), activeConversationsList.map((activeConv) => /* @__PURE__ */ import_react14.default.createElement(
|
|
6035
6624
|
ChatPanelWrapper,
|
|
6036
6625
|
{
|
|
6037
6626
|
key: `${activeConv.stableKey}-${activeConv.agentId}`,
|
|
@@ -6063,10 +6652,25 @@ var AIAgentPanel = import_react13.default.forwardRef(({
|
|
|
6063
6652
|
maxContextTokens,
|
|
6064
6653
|
enableContextDetailView,
|
|
6065
6654
|
onConversationCreated: handleConversationCreated,
|
|
6066
|
-
conversationInitialPrompt: activeConv.conversationInitialPrompt
|
|
6655
|
+
conversationInitialPrompt: activeConv.conversationInitialPrompt,
|
|
6656
|
+
cssUrl,
|
|
6657
|
+
markdownClass,
|
|
6658
|
+
width,
|
|
6659
|
+
height,
|
|
6660
|
+
scrollToEnd,
|
|
6661
|
+
prismStyle,
|
|
6662
|
+
showSaveButton,
|
|
6663
|
+
showEmailButton,
|
|
6664
|
+
messages,
|
|
6665
|
+
showCallToAction,
|
|
6666
|
+
callToActionButtonText,
|
|
6667
|
+
callToActionEmailAddress,
|
|
6668
|
+
callToActionEmailSubject,
|
|
6669
|
+
customerEmailCaptureMode,
|
|
6670
|
+
customerEmailCapturePlaceholder
|
|
6067
6671
|
}
|
|
6068
|
-
)), loadingConversationId && /* @__PURE__ */
|
|
6069
|
-
/* @__PURE__ */
|
|
6672
|
+
)), loadingConversationId && /* @__PURE__ */ import_react14.default.createElement("div", { className: "ai-agent-panel__conversation-loading-overlay" }, /* @__PURE__ */ import_react14.default.createElement("div", { className: "ai-agent-panel__loading-spinner" }), /* @__PURE__ */ import_react14.default.createElement("p", null, "Loading conversation...")), currentAgentMetadata && activeConversationsList.length === 0 && !loadingConversationId && /* @__PURE__ */ import_react14.default.createElement("div", { className: "ai-agent-panel__empty-chat" }, /* @__PURE__ */ import_react14.default.createElement(MessageIcon, null), /* @__PURE__ */ import_react14.default.createElement("p", null, "Select a conversation or start a new one"), /* @__PURE__ */ import_react14.default.createElement(Button, { variant: "default", size: "sm", onClick: handleNewConversation }, "New Conversation")), agentsLoading && !currentAgentMetadata && /* @__PURE__ */ import_react14.default.createElement("div", { className: "ai-agent-panel__loading" }, /* @__PURE__ */ import_react14.default.createElement("div", { className: "ai-agent-panel__loading-spinner" }), /* @__PURE__ */ import_react14.default.createElement("p", null, "Loading agent..."))),
|
|
6673
|
+
/* @__PURE__ */ import_react14.default.createElement(
|
|
6070
6674
|
Dialog,
|
|
6071
6675
|
{
|
|
6072
6676
|
isOpen: showHandoffDialog,
|
|
@@ -6074,7 +6678,7 @@ var AIAgentPanel = import_react13.default.forwardRef(({
|
|
|
6074
6678
|
title: "Switch Agent?",
|
|
6075
6679
|
description: handoffSource === "page" ? `This page has a recommended agent: ${suggestedAgent ? ((_b = (_a = getAgent(suggestedAgent)) == null ? void 0 : _a.metadata) == null ? void 0 : _b.displayTitle) || suggestedAgent : "another agent"}. Would you like to switch?` : `The current agent suggests transferring this conversation to ${suggestedAgent ? ((_d = (_c = getAgent(suggestedAgent)) == null ? void 0 : _c.metadata) == null ? void 0 : _d.displayTitle) || suggestedAgent : "another agent"}.`
|
|
6076
6680
|
},
|
|
6077
|
-
/* @__PURE__ */
|
|
6681
|
+
/* @__PURE__ */ import_react14.default.createElement(DialogFooter, null, /* @__PURE__ */ import_react14.default.createElement(Button, { variant: "outline", onClick: handleHandoffCancel }, "Stay with current agent"), /* @__PURE__ */ import_react14.default.createElement(Button, { onClick: handleHandoffConfirm }, "Switch agent"))
|
|
6078
6682
|
)
|
|
6079
6683
|
);
|
|
6080
6684
|
});
|
|
@@ -6082,7 +6686,7 @@ AIAgentPanel.displayName = "AIAgentPanel";
|
|
|
6082
6686
|
var AIAgentPanel_default = AIAgentPanel;
|
|
6083
6687
|
|
|
6084
6688
|
// src/hooks/useConversationStore.ts
|
|
6085
|
-
var
|
|
6689
|
+
var import_react15 = require("react");
|
|
6086
6690
|
var STORAGE_VERSION = "v1";
|
|
6087
6691
|
var generateId = () => {
|
|
6088
6692
|
if (typeof crypto !== "undefined" && "randomUUID" in crypto) {
|
|
@@ -6175,25 +6779,25 @@ function useConversationStore(options = {}) {
|
|
|
6175
6779
|
maxConversations = 50,
|
|
6176
6780
|
autoPersist = true
|
|
6177
6781
|
} = options;
|
|
6178
|
-
const [conversations, setConversations] = (0,
|
|
6782
|
+
const [conversations, setConversations] = (0, import_react15.useState)(
|
|
6179
6783
|
() => readFromStorage(namespace)
|
|
6180
6784
|
);
|
|
6181
|
-
const [activeConversationId, setActiveConversationId] = (0,
|
|
6182
|
-
const [searchQuery, setSearchQuery] = (0,
|
|
6183
|
-
(0,
|
|
6785
|
+
const [activeConversationId, setActiveConversationId] = (0, import_react15.useState)(null);
|
|
6786
|
+
const [searchQuery, setSearchQuery] = (0, import_react15.useState)("");
|
|
6787
|
+
(0, import_react15.useEffect)(() => {
|
|
6184
6788
|
if (autoPersist) {
|
|
6185
6789
|
writeToStorage(namespace, conversations);
|
|
6186
6790
|
}
|
|
6187
6791
|
}, [conversations, namespace, autoPersist]);
|
|
6188
|
-
(0,
|
|
6792
|
+
(0, import_react15.useEffect)(() => {
|
|
6189
6793
|
setConversations(readFromStorage(namespace));
|
|
6190
6794
|
setActiveConversationId(null);
|
|
6191
6795
|
}, [namespace]);
|
|
6192
|
-
const activeConversation = (0,
|
|
6796
|
+
const activeConversation = (0, import_react15.useMemo)(() => {
|
|
6193
6797
|
if (!activeConversationId) return null;
|
|
6194
6798
|
return conversations.find((c) => c.id === activeConversationId) || null;
|
|
6195
6799
|
}, [conversations, activeConversationId]);
|
|
6196
|
-
const filteredConversations = (0,
|
|
6800
|
+
const filteredConversations = (0, import_react15.useMemo)(() => {
|
|
6197
6801
|
if (!searchQuery.trim()) return conversations;
|
|
6198
6802
|
const query = searchQuery.toLowerCase().trim();
|
|
6199
6803
|
return conversations.filter((conv) => {
|
|
@@ -6201,13 +6805,13 @@ function useConversationStore(options = {}) {
|
|
|
6201
6805
|
return searchable.includes(query);
|
|
6202
6806
|
});
|
|
6203
6807
|
}, [conversations, searchQuery]);
|
|
6204
|
-
const groupedConversations = (0,
|
|
6808
|
+
const groupedConversations = (0, import_react15.useMemo)(() => {
|
|
6205
6809
|
const sorted = [...filteredConversations].sort(
|
|
6206
6810
|
(a, b) => new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime()
|
|
6207
6811
|
);
|
|
6208
6812
|
return groupByTimePeriod(sorted);
|
|
6209
6813
|
}, [filteredConversations]);
|
|
6210
|
-
const createConversation = (0,
|
|
6814
|
+
const createConversation = (0, import_react15.useCallback)(
|
|
6211
6815
|
(agentId, initialHistory) => {
|
|
6212
6816
|
const now = (/* @__PURE__ */ new Date()).toISOString();
|
|
6213
6817
|
const history = initialHistory || {};
|
|
@@ -6229,7 +6833,7 @@ function useConversationStore(options = {}) {
|
|
|
6229
6833
|
},
|
|
6230
6834
|
[maxConversations]
|
|
6231
6835
|
);
|
|
6232
|
-
const updateConversationHistory = (0,
|
|
6836
|
+
const updateConversationHistory = (0, import_react15.useCallback)(
|
|
6233
6837
|
(conversationId, history) => {
|
|
6234
6838
|
setConversations(
|
|
6235
6839
|
(prev) => prev.map((conv) => {
|
|
@@ -6245,26 +6849,26 @@ function useConversationStore(options = {}) {
|
|
|
6245
6849
|
},
|
|
6246
6850
|
[]
|
|
6247
6851
|
);
|
|
6248
|
-
const deleteConversation = (0,
|
|
6852
|
+
const deleteConversation = (0, import_react15.useCallback)((conversationId) => {
|
|
6249
6853
|
setConversations((prev) => prev.filter((c) => c.id !== conversationId));
|
|
6250
6854
|
if (activeConversationId === conversationId) {
|
|
6251
6855
|
setActiveConversationId(null);
|
|
6252
6856
|
}
|
|
6253
6857
|
}, [activeConversationId]);
|
|
6254
|
-
const selectConversation = (0,
|
|
6858
|
+
const selectConversation = (0, import_react15.useCallback)((conversationId) => {
|
|
6255
6859
|
setActiveConversationId(conversationId);
|
|
6256
6860
|
}, []);
|
|
6257
|
-
const getConversationsForAgent = (0,
|
|
6861
|
+
const getConversationsForAgent = (0, import_react15.useCallback)(
|
|
6258
6862
|
(agentId) => {
|
|
6259
6863
|
return conversations.filter((c) => c.agentId === agentId);
|
|
6260
6864
|
},
|
|
6261
6865
|
[conversations]
|
|
6262
6866
|
);
|
|
6263
|
-
const clearAllConversations = (0,
|
|
6867
|
+
const clearAllConversations = (0, import_react15.useCallback)(() => {
|
|
6264
6868
|
setConversations([]);
|
|
6265
6869
|
setActiveConversationId(null);
|
|
6266
6870
|
}, []);
|
|
6267
|
-
const startNewConversation = (0,
|
|
6871
|
+
const startNewConversation = (0, import_react15.useCallback)(() => {
|
|
6268
6872
|
setActiveConversationId(null);
|
|
6269
6873
|
}, []);
|
|
6270
6874
|
return {
|