@hef2024/llmasaservice-ui 0.20.0 → 0.20.2
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 +511 -0
- package/dist/index.d.mts +39 -0
- package/dist/index.d.ts +39 -0
- package/dist/index.js +1181 -451
- package/dist/index.mjs +1012 -282
- 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 +186 -9
- package/src/AIChatPanel.css +618 -0
- package/src/AIChatPanel.tsx +723 -38
- 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 +69 -0
- package/src/components/ui/Tooltip.tsx +1 -0
- package/src/components/ui/index.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,
|
|
@@ -3430,23 +3500,26 @@ var ChatInput = import_react11.default.memo(({
|
|
|
3430
3500
|
contextSections = [],
|
|
3431
3501
|
totalContextTokens = 0,
|
|
3432
3502
|
maxContextTokens = 8e3,
|
|
3433
|
-
enableContextDetailView = false
|
|
3503
|
+
enableContextDetailView = false,
|
|
3504
|
+
disabledSectionIds = /* @__PURE__ */ new Set(),
|
|
3505
|
+
onToggleSection
|
|
3434
3506
|
}) => {
|
|
3435
|
-
const [inputValue, setInputValue] = (0,
|
|
3436
|
-
const [dropdownOpen, setDropdownOpen] = (0,
|
|
3437
|
-
const [contextViewerOpen, setContextViewerOpen] = (0,
|
|
3438
|
-
const [contextViewMode, setContextViewMode] = (0,
|
|
3439
|
-
const
|
|
3440
|
-
const
|
|
3441
|
-
const
|
|
3442
|
-
const
|
|
3507
|
+
const [inputValue, setInputValue] = (0, import_react12.useState)("");
|
|
3508
|
+
const [dropdownOpen, setDropdownOpen] = (0, import_react12.useState)(false);
|
|
3509
|
+
const [contextViewerOpen, setContextViewerOpen] = (0, import_react12.useState)(false);
|
|
3510
|
+
const [contextViewMode, setContextViewMode] = (0, import_react12.useState)("summary");
|
|
3511
|
+
const [expandedSectionId, setExpandedSectionId] = (0, import_react12.useState)(null);
|
|
3512
|
+
const textareaRef = (0, import_react12.useRef)(null);
|
|
3513
|
+
const containerRef = (0, import_react12.useRef)(null);
|
|
3514
|
+
const contextPopoverRef = (0, import_react12.useRef)(null);
|
|
3515
|
+
const autoResize = (0, import_react12.useCallback)(() => {
|
|
3443
3516
|
const textarea = textareaRef.current;
|
|
3444
3517
|
if (textarea) {
|
|
3445
3518
|
textarea.style.height = "auto";
|
|
3446
3519
|
textarea.style.height = `${Math.min(textarea.scrollHeight, 200)}px`;
|
|
3447
3520
|
}
|
|
3448
3521
|
}, []);
|
|
3449
|
-
const handleSubmit = (0,
|
|
3522
|
+
const handleSubmit = (0, import_react12.useCallback)(() => {
|
|
3450
3523
|
const trimmed = inputValue.trim();
|
|
3451
3524
|
if (trimmed && idle) {
|
|
3452
3525
|
onSubmit(trimmed);
|
|
@@ -3456,7 +3529,7 @@ var ChatInput = import_react11.default.memo(({
|
|
|
3456
3529
|
}
|
|
3457
3530
|
}
|
|
3458
3531
|
}, [inputValue, idle, onSubmit]);
|
|
3459
|
-
(0,
|
|
3532
|
+
(0, import_react12.useEffect)(() => {
|
|
3460
3533
|
const handleClickOutside = (event) => {
|
|
3461
3534
|
if (containerRef.current && !containerRef.current.contains(event.target)) {
|
|
3462
3535
|
setDropdownOpen(false);
|
|
@@ -3467,11 +3540,12 @@ var ChatInput = import_react11.default.memo(({
|
|
|
3467
3540
|
return () => document.removeEventListener("mousedown", handleClickOutside);
|
|
3468
3541
|
}
|
|
3469
3542
|
}, [dropdownOpen]);
|
|
3470
|
-
(0,
|
|
3543
|
+
(0, import_react12.useEffect)(() => {
|
|
3471
3544
|
const handleClickOutside = (event) => {
|
|
3472
3545
|
if (contextPopoverRef.current && !contextPopoverRef.current.contains(event.target)) {
|
|
3473
3546
|
setContextViewerOpen(false);
|
|
3474
3547
|
setContextViewMode("summary");
|
|
3548
|
+
setExpandedSectionId(null);
|
|
3475
3549
|
}
|
|
3476
3550
|
};
|
|
3477
3551
|
if (contextViewerOpen) {
|
|
@@ -3499,13 +3573,13 @@ var ChatInput = import_react11.default.memo(({
|
|
|
3499
3573
|
if (typeof data === "string") return data;
|
|
3500
3574
|
return JSON.stringify(data, null, 2);
|
|
3501
3575
|
};
|
|
3502
|
-
return /* @__PURE__ */
|
|
3576
|
+
return /* @__PURE__ */ import_react12.default.createElement(
|
|
3503
3577
|
"div",
|
|
3504
3578
|
{
|
|
3505
3579
|
className: `ai-chat-panel__input-container ${dropdownOpen ? "ai-chat-panel__input-container--dropdown-open" : ""}`,
|
|
3506
3580
|
ref: containerRef
|
|
3507
3581
|
},
|
|
3508
|
-
/* @__PURE__ */
|
|
3582
|
+
/* @__PURE__ */ import_react12.default.createElement("div", { className: "ai-chat-panel__input" }, /* @__PURE__ */ import_react12.default.createElement(
|
|
3509
3583
|
"textarea",
|
|
3510
3584
|
{
|
|
3511
3585
|
ref: textareaRef,
|
|
@@ -3525,24 +3599,24 @@ var ChatInput = import_react11.default.memo(({
|
|
|
3525
3599
|
rows: 1
|
|
3526
3600
|
}
|
|
3527
3601
|
)),
|
|
3528
|
-
/* @__PURE__ */
|
|
3602
|
+
/* @__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
3603
|
"button",
|
|
3530
3604
|
{
|
|
3531
3605
|
className: "ai-chat-agent-selector__trigger",
|
|
3532
3606
|
onClick: () => setDropdownOpen(!dropdownOpen),
|
|
3533
3607
|
disabled: agentsLoading
|
|
3534
3608
|
},
|
|
3535
|
-
currentAgentAvatarUrl ? /* @__PURE__ */
|
|
3609
|
+
currentAgentAvatarUrl ? /* @__PURE__ */ import_react12.default.createElement(
|
|
3536
3610
|
"img",
|
|
3537
3611
|
{
|
|
3538
3612
|
src: currentAgentAvatarUrl,
|
|
3539
3613
|
alt: currentAgentLabel || "Agent",
|
|
3540
3614
|
className: "ai-chat-agent-selector__avatar"
|
|
3541
3615
|
}
|
|
3542
|
-
) : /* @__PURE__ */
|
|
3543
|
-
/* @__PURE__ */
|
|
3544
|
-
dropdownOpen ? /* @__PURE__ */
|
|
3545
|
-
)) : /* @__PURE__ */
|
|
3616
|
+
) : /* @__PURE__ */ import_react12.default.createElement(AgentIcon, null),
|
|
3617
|
+
/* @__PURE__ */ import_react12.default.createElement("span", { className: "ai-chat-agent-selector__label" }, agentsLoading ? "Loading..." : currentAgentLabel || "Select agent"),
|
|
3618
|
+
dropdownOpen ? /* @__PURE__ */ import_react12.default.createElement(ChevronUpIcon, null) : /* @__PURE__ */ import_react12.default.createElement(ChevronDownIcon, null)
|
|
3619
|
+
)) : /* @__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
3620
|
"button",
|
|
3547
3621
|
{
|
|
3548
3622
|
className: `ai-chat-context-pill ${contextViewerOpen ? "ai-chat-context-pill--active" : ""} ${isOverLimit ? "ai-chat-context-pill--warning" : ""}`,
|
|
@@ -3553,92 +3627,140 @@ var ChatInput = import_react11.default.memo(({
|
|
|
3553
3627
|
setContextViewerOpen(!contextViewerOpen);
|
|
3554
3628
|
if (!contextViewerOpen) {
|
|
3555
3629
|
setContextViewMode("summary");
|
|
3630
|
+
setExpandedSectionId(null);
|
|
3631
|
+
} else {
|
|
3632
|
+
setExpandedSectionId(null);
|
|
3556
3633
|
}
|
|
3557
3634
|
},
|
|
3558
3635
|
type: "button",
|
|
3559
3636
|
title: "View context"
|
|
3560
3637
|
},
|
|
3561
|
-
/* @__PURE__ */
|
|
3562
|
-
), contextViewerOpen && /* @__PURE__ */
|
|
3638
|
+
/* @__PURE__ */ import_react12.default.createElement("span", { className: "ai-chat-context-pill__label" }, "context: ", contextSections.length, " ", contextSections.length === 1 ? "section" : "sections")
|
|
3639
|
+
), contextViewerOpen && /* @__PURE__ */ import_react12.default.createElement(
|
|
3563
3640
|
"div",
|
|
3564
3641
|
{
|
|
3565
3642
|
className: `ai-chat-context-popover ${contextViewMode === "detail" ? "ai-chat-context-popover--detail" : ""}`,
|
|
3566
3643
|
ref: contextPopoverRef,
|
|
3567
3644
|
onClick: (e) => e.stopPropagation()
|
|
3568
3645
|
},
|
|
3569
|
-
contextViewMode === "summary" && /* @__PURE__ */
|
|
3646
|
+
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
3647
|
"button",
|
|
3571
3648
|
{
|
|
3572
3649
|
className: "ai-chat-context-popover__close",
|
|
3573
|
-
onClick: () =>
|
|
3650
|
+
onClick: () => {
|
|
3651
|
+
setContextViewerOpen(false);
|
|
3652
|
+
setExpandedSectionId(null);
|
|
3653
|
+
},
|
|
3574
3654
|
type: "button"
|
|
3575
3655
|
},
|
|
3576
3656
|
"\xD7"
|
|
3577
|
-
)), /* @__PURE__ */
|
|
3657
|
+
)), /* @__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
3658
|
"div",
|
|
3579
3659
|
{
|
|
3580
3660
|
className: `ai-chat-context-popover__progress-bar ${isOverLimit ? "ai-chat-context-popover__progress-bar--warning" : ""}`,
|
|
3581
3661
|
style: { width: `${Math.min(tokenPercentage, 100)}%` }
|
|
3582
3662
|
}
|
|
3583
|
-
))), /* @__PURE__ */
|
|
3663
|
+
))), /* @__PURE__ */ import_react12.default.createElement("div", { className: "ai-chat-context-popover__sections" }, contextSections.map((section) => /* @__PURE__ */ import_react12.default.createElement(
|
|
3584
3664
|
"div",
|
|
3585
3665
|
{
|
|
3586
3666
|
key: section.id,
|
|
3587
3667
|
className: `ai-chat-context-popover__section-item ${enableContextDetailView ? "ai-chat-context-popover__section-item--clickable" : ""}`,
|
|
3588
3668
|
onClick: () => {
|
|
3589
3669
|
if (enableContextDetailView) {
|
|
3670
|
+
setExpandedSectionId(section.id);
|
|
3590
3671
|
setContextViewMode("detail");
|
|
3591
3672
|
}
|
|
3592
3673
|
}
|
|
3593
3674
|
},
|
|
3594
|
-
/* @__PURE__ */
|
|
3595
|
-
/* @__PURE__ */
|
|
3596
|
-
/* @__PURE__ */
|
|
3597
|
-
))), enableContextDetailView && /* @__PURE__ */
|
|
3675
|
+
/* @__PURE__ */ import_react12.default.createElement("span", { className: "ai-chat-context-popover__section-icon" }, "\u{1F4C4}"),
|
|
3676
|
+
/* @__PURE__ */ import_react12.default.createElement("span", { className: "ai-chat-context-popover__section-title" }, section.title),
|
|
3677
|
+
/* @__PURE__ */ import_react12.default.createElement("span", { className: "ai-chat-context-popover__section-tokens" }, section.tokens || Math.ceil(JSON.stringify(section.data).length / 4))
|
|
3678
|
+
))), enableContextDetailView && /* @__PURE__ */ import_react12.default.createElement(
|
|
3598
3679
|
"button",
|
|
3599
3680
|
{
|
|
3600
3681
|
className: "ai-chat-context-popover__expand-btn",
|
|
3601
|
-
onClick: () =>
|
|
3682
|
+
onClick: () => {
|
|
3683
|
+
setExpandedSectionId(null);
|
|
3684
|
+
setContextViewMode("detail");
|
|
3685
|
+
},
|
|
3602
3686
|
type: "button"
|
|
3603
3687
|
},
|
|
3604
3688
|
"View details \u2192"
|
|
3605
3689
|
)),
|
|
3606
|
-
contextViewMode === "detail" && enableContextDetailView && /* @__PURE__ */
|
|
3690
|
+
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
3691
|
"button",
|
|
3608
3692
|
{
|
|
3609
3693
|
className: "ai-chat-context-popover__back",
|
|
3610
|
-
onClick: () =>
|
|
3694
|
+
onClick: () => {
|
|
3695
|
+
setContextViewMode("summary");
|
|
3696
|
+
setExpandedSectionId(null);
|
|
3697
|
+
},
|
|
3611
3698
|
type: "button"
|
|
3612
3699
|
},
|
|
3613
3700
|
"\u2190 Back"
|
|
3614
|
-
), /* @__PURE__ */
|
|
3701
|
+
), /* @__PURE__ */ import_react12.default.createElement("span", { className: "ai-chat-context-popover__title" }, "Context Details"), /* @__PURE__ */ import_react12.default.createElement(
|
|
3615
3702
|
"button",
|
|
3616
3703
|
{
|
|
3617
3704
|
className: "ai-chat-context-popover__close",
|
|
3618
|
-
onClick: () =>
|
|
3705
|
+
onClick: () => {
|
|
3706
|
+
setContextViewerOpen(false);
|
|
3707
|
+
setExpandedSectionId(null);
|
|
3708
|
+
},
|
|
3619
3709
|
type: "button"
|
|
3620
3710
|
},
|
|
3621
3711
|
"\xD7"
|
|
3622
|
-
)), /* @__PURE__ */
|
|
3712
|
+
)), /* @__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
3713
|
"div",
|
|
3624
3714
|
{
|
|
3625
3715
|
className: `ai-chat-context-popover__progress-bar ${isOverLimit ? "ai-chat-context-popover__progress-bar--warning" : ""}`,
|
|
3626
3716
|
style: { width: `${Math.min(tokenPercentage, 100)}%` }
|
|
3627
3717
|
}
|
|
3628
|
-
))), /* @__PURE__ */
|
|
3718
|
+
))), /* @__PURE__ */ import_react12.default.createElement("div", { className: "ai-chat-context-popover__detail-sections" }, contextSections.map((section) => {
|
|
3629
3719
|
const format = detectFormat(section.data);
|
|
3630
|
-
|
|
3720
|
+
const isEnabled = !disabledSectionIds.has(section.id);
|
|
3721
|
+
return /* @__PURE__ */ import_react12.default.createElement(
|
|
3722
|
+
"details",
|
|
3723
|
+
{
|
|
3724
|
+
key: section.id,
|
|
3725
|
+
className: `ai-chat-context-popover__detail-section ${!isEnabled ? "ai-chat-context-popover__detail-section--disabled" : ""}`,
|
|
3726
|
+
open: expandedSectionId === section.id
|
|
3727
|
+
},
|
|
3728
|
+
/* @__PURE__ */ import_react12.default.createElement("summary", { className: "ai-chat-context-popover__detail-section-header" }, /* @__PURE__ */ import_react12.default.createElement("div", { className: "ai-chat-context-popover__detail-section-title-row" }, /* @__PURE__ */ import_react12.default.createElement("span", { className: "ai-chat-context-popover__detail-section-title" }, section.title), /* @__PURE__ */ import_react12.default.createElement(
|
|
3729
|
+
"label",
|
|
3730
|
+
{
|
|
3731
|
+
className: "ai-chat-context-toggle",
|
|
3732
|
+
onClick: (e) => e.stopPropagation(),
|
|
3733
|
+
title: isEnabled ? "Disable this context section" : "Enable this context section"
|
|
3734
|
+
},
|
|
3735
|
+
/* @__PURE__ */ import_react12.default.createElement(
|
|
3736
|
+
"input",
|
|
3737
|
+
{
|
|
3738
|
+
type: "checkbox",
|
|
3739
|
+
checked: isEnabled,
|
|
3740
|
+
onChange: (e) => {
|
|
3741
|
+
e.stopPropagation();
|
|
3742
|
+
if (onToggleSection) {
|
|
3743
|
+
onToggleSection(section.id, !isEnabled);
|
|
3744
|
+
}
|
|
3745
|
+
},
|
|
3746
|
+
className: "ai-chat-context-toggle__input"
|
|
3747
|
+
}
|
|
3748
|
+
),
|
|
3749
|
+
/* @__PURE__ */ import_react12.default.createElement("span", { className: "ai-chat-context-toggle__slider" })
|
|
3750
|
+
)), /* @__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)))),
|
|
3751
|
+
/* @__PURE__ */ import_react12.default.createElement("pre", { className: "ai-chat-context-popover__detail-content" }, /* @__PURE__ */ import_react12.default.createElement("code", null, formatContent(section.data, format)))
|
|
3752
|
+
);
|
|
3631
3753
|
})))
|
|
3632
|
-
)), /* @__PURE__ */
|
|
3754
|
+
)), /* @__PURE__ */ import_react12.default.createElement(
|
|
3633
3755
|
"button",
|
|
3634
3756
|
{
|
|
3635
3757
|
className: `ai-chat-send-button ${idle && !inputValue.trim() ? "ai-chat-send-button--disabled" : ""} ${!idle ? "ai-chat-send-button--stop" : ""}`,
|
|
3636
3758
|
onClick: () => idle ? handleSubmit() : onStop(),
|
|
3637
3759
|
disabled: idle && !inputValue.trim()
|
|
3638
3760
|
},
|
|
3639
|
-
idle ? /* @__PURE__ */
|
|
3761
|
+
idle ? /* @__PURE__ */ import_react12.default.createElement(ArrowUpIcon, null) : /* @__PURE__ */ import_react12.default.createElement(StopIcon, null)
|
|
3640
3762
|
)),
|
|
3641
|
-
agentOptions.length > 0 && dropdownOpen && /* @__PURE__ */
|
|
3763
|
+
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
3764
|
"button",
|
|
3643
3765
|
{
|
|
3644
3766
|
key: option.value,
|
|
@@ -3650,16 +3772,16 @@ var ChatInput = import_react11.default.memo(({
|
|
|
3650
3772
|
setDropdownOpen(false);
|
|
3651
3773
|
}
|
|
3652
3774
|
},
|
|
3653
|
-
option.avatarUrl ? /* @__PURE__ */
|
|
3775
|
+
option.avatarUrl ? /* @__PURE__ */ import_react12.default.createElement(
|
|
3654
3776
|
"img",
|
|
3655
3777
|
{
|
|
3656
3778
|
src: option.avatarUrl,
|
|
3657
3779
|
alt: option.label,
|
|
3658
3780
|
className: "ai-chat-agent-selector__option-avatar"
|
|
3659
3781
|
}
|
|
3660
|
-
) : option.icon ? /* @__PURE__ */
|
|
3661
|
-
/* @__PURE__ */
|
|
3662
|
-
option.value === currentAgentId && /* @__PURE__ */
|
|
3782
|
+
) : option.icon ? /* @__PURE__ */ import_react12.default.createElement("span", { className: "ai-chat-agent-selector__option-icon" }, option.icon) : null,
|
|
3783
|
+
/* @__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)),
|
|
3784
|
+
option.value === currentAgentId && /* @__PURE__ */ import_react12.default.createElement("span", { className: "ai-chat-agent-selector__option-check" }, /* @__PURE__ */ import_react12.default.createElement(CheckIcon, null))
|
|
3663
3785
|
)))
|
|
3664
3786
|
);
|
|
3665
3787
|
});
|
|
@@ -3703,35 +3825,81 @@ var AIChatPanel = ({
|
|
|
3703
3825
|
totalContextTokens = 0,
|
|
3704
3826
|
maxContextTokens = 8e3,
|
|
3705
3827
|
enableContextDetailView = false,
|
|
3706
|
-
|
|
3828
|
+
disabledSectionIds: propDisabledSectionIds,
|
|
3829
|
+
onToggleSection: propOnToggleSection,
|
|
3830
|
+
onConversationCreated,
|
|
3831
|
+
// UI Customization Props
|
|
3832
|
+
cssUrl,
|
|
3833
|
+
markdownClass,
|
|
3834
|
+
width,
|
|
3835
|
+
height,
|
|
3836
|
+
scrollToEnd = false,
|
|
3837
|
+
prismStyle,
|
|
3838
|
+
// Email & Save Props
|
|
3839
|
+
showSaveButton = true,
|
|
3840
|
+
showEmailButton = true,
|
|
3841
|
+
messages = [],
|
|
3842
|
+
// Call-to-Action Props
|
|
3843
|
+
showCallToAction = false,
|
|
3844
|
+
callToActionButtonText = "Submit",
|
|
3845
|
+
callToActionEmailAddress = "",
|
|
3846
|
+
callToActionEmailSubject = "Agent CTA submitted",
|
|
3847
|
+
// Customer Email Capture Props
|
|
3848
|
+
customerEmailCaptureMode = "HIDE",
|
|
3849
|
+
customerEmailCapturePlaceholder = "Please enter your email..."
|
|
3707
3850
|
}) => {
|
|
3851
|
+
var _a;
|
|
3708
3852
|
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,
|
|
3853
|
+
const [lastController, setLastController] = (0, import_react12.useState)(new AbortController());
|
|
3854
|
+
const [lastMessages, setLastMessages] = (0, import_react12.useState)([]);
|
|
3855
|
+
const [history, setHistory] = (0, import_react12.useState)(initialHistory);
|
|
3856
|
+
const [isLoading, setIsLoading] = (0, import_react12.useState)(false);
|
|
3857
|
+
const [lastPrompt, setLastPrompt] = (0, import_react12.useState)(null);
|
|
3858
|
+
const [lastKey, setLastKey] = (0, import_react12.useState)(null);
|
|
3859
|
+
const [currentConversation, setCurrentConversation] = (0, import_react12.useState)(conversation);
|
|
3860
|
+
const [followOnQuestionsState, setFollowOnQuestionsState] = (0, import_react12.useState)(followOnQuestions);
|
|
3861
|
+
const [thinkingBlocks, setThinkingBlocks] = (0, import_react12.useState)([]);
|
|
3862
|
+
const [currentThinkingIndex, setCurrentThinkingIndex] = (0, import_react12.useState)(0);
|
|
3863
|
+
const [newConversationConfirm, setNewConversationConfirm] = (0, import_react12.useState)(false);
|
|
3864
|
+
const [justReset, setJustReset] = (0, import_react12.useState)(false);
|
|
3865
|
+
const [copiedCallId, setCopiedCallId] = (0, import_react12.useState)(null);
|
|
3866
|
+
const [feedbackCallId, setFeedbackCallId] = (0, import_react12.useState)(null);
|
|
3867
|
+
const [error, setError] = (0, import_react12.useState)(null);
|
|
3868
|
+
const [emailSent, setEmailSent] = (0, import_react12.useState)(false);
|
|
3869
|
+
const [isToolInfoModalOpen, setIsToolInfoModalOpen] = (0, import_react12.useState)(false);
|
|
3870
|
+
const [toolInfoData, setToolInfoData] = (0, import_react12.useState)(null);
|
|
3871
|
+
const [callToActionSent, setCallToActionSent] = (0, import_react12.useState)(false);
|
|
3872
|
+
const [CTAClickedButNoEmail, setCTAClickedButNoEmail] = (0, import_react12.useState)(false);
|
|
3873
|
+
const [emailInput, setEmailInput] = (0, import_react12.useState)((_a = customer == null ? void 0 : customer.customer_user_email) != null ? _a : "");
|
|
3874
|
+
const [emailInputSet, setEmailInputSet] = (0, import_react12.useState)(false);
|
|
3875
|
+
const [emailValid, setEmailValid] = (0, import_react12.useState)(true);
|
|
3876
|
+
const [showEmailPanel, setShowEmailPanel] = (0, import_react12.useState)(customerEmailCaptureMode !== "HIDE");
|
|
3877
|
+
const [emailClickedButNoEmail, setEmailClickedButNoEmail] = (0, import_react12.useState)(false);
|
|
3878
|
+
const [pendingToolRequests, setPendingToolRequests] = (0, import_react12.useState)([]);
|
|
3879
|
+
const [sessionApprovedTools, setSessionApprovedTools] = (0, import_react12.useState)([]);
|
|
3880
|
+
const [alwaysApprovedTools, setAlwaysApprovedTools] = (0, import_react12.useState)([]);
|
|
3881
|
+
const [internalDisabledSectionIds, setInternalDisabledSectionIds] = (0, import_react12.useState)(/* @__PURE__ */ new Set());
|
|
3882
|
+
const disabledSectionIds = propDisabledSectionIds != null ? propDisabledSectionIds : internalDisabledSectionIds;
|
|
3883
|
+
(0, import_react12.useEffect)(() => {
|
|
3884
|
+
setShowEmailPanel(customerEmailCaptureMode !== "HIDE");
|
|
3885
|
+
if (customerEmailCaptureMode === "REQUIRED") {
|
|
3886
|
+
if (!isEmailAddress(emailInput)) {
|
|
3887
|
+
setEmailValid(false);
|
|
3888
|
+
}
|
|
3889
|
+
}
|
|
3890
|
+
}, [customerEmailCaptureMode, emailInput]);
|
|
3891
|
+
const bottomRef = (0, import_react12.useRef)(null);
|
|
3892
|
+
const responseAreaRef = (0, import_react12.useRef)(null);
|
|
3893
|
+
const [userHasScrolled, setUserHasScrolled] = (0, import_react12.useState)(false);
|
|
3894
|
+
const lastScrollTopRef = (0, import_react12.useRef)(0);
|
|
3895
|
+
const scrollRAFRef = (0, import_react12.useRef)(null);
|
|
3896
|
+
const lastScrollTimeRef = (0, import_react12.useRef)(0);
|
|
3897
|
+
const prevIdleRef = (0, import_react12.useRef)(true);
|
|
3898
|
+
const hasNotifiedCompletionRef = (0, import_react12.useRef)(true);
|
|
3899
|
+
const latestHistoryRef = (0, import_react12.useRef)(initialHistory);
|
|
3900
|
+
const initialPromptSentRef = (0, import_react12.useRef)(false);
|
|
3901
|
+
const lastFollowOnPromptRef = (0, import_react12.useRef)("");
|
|
3902
|
+
(0, import_react12.useEffect)(() => {
|
|
3735
3903
|
if (!initialHistory) return;
|
|
3736
3904
|
setHistory((prev) => {
|
|
3737
3905
|
const currentKeys = Object.keys(prev);
|
|
@@ -3765,23 +3933,23 @@ var AIChatPanel = ({
|
|
|
3765
3933
|
const toolList = llmResult.toolList || [];
|
|
3766
3934
|
const toolsLoading = llmResult.toolsLoading || false;
|
|
3767
3935
|
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,
|
|
3936
|
+
const historyCallbackRef = (0, import_react12.useRef)(historyChangedCallback);
|
|
3937
|
+
const responseCompleteCallbackRef = (0, import_react12.useRef)(responseCompleteCallback);
|
|
3938
|
+
const responseRef = (0, import_react12.useRef)(response);
|
|
3939
|
+
const lastKeyRef = (0, import_react12.useRef)(lastKey);
|
|
3940
|
+
const lastCallIdRef = (0, import_react12.useRef)(lastCallId);
|
|
3941
|
+
const lastPromptRef = (0, import_react12.useRef)(lastPrompt);
|
|
3774
3942
|
historyCallbackRef.current = historyChangedCallback;
|
|
3775
3943
|
responseCompleteCallbackRef.current = responseCompleteCallback;
|
|
3776
3944
|
responseRef.current = response;
|
|
3777
3945
|
lastKeyRef.current = lastKey;
|
|
3778
3946
|
lastCallIdRef.current = lastCallId;
|
|
3779
3947
|
lastPromptRef.current = lastPrompt;
|
|
3780
|
-
const
|
|
3781
|
-
() => theme === "light" ? import_material_light3.default : import_material_dark3.default,
|
|
3782
|
-
[theme]
|
|
3948
|
+
const effectivePrismStyle = (0, import_react12.useMemo)(
|
|
3949
|
+
() => prismStyle != null ? prismStyle : theme === "light" ? import_material_light3.default : import_material_dark3.default,
|
|
3950
|
+
[prismStyle, theme]
|
|
3783
3951
|
);
|
|
3784
|
-
const browserInfo = (0,
|
|
3952
|
+
const browserInfo = (0, import_react12.useMemo)(() => {
|
|
3785
3953
|
if (typeof window === "undefined") return null;
|
|
3786
3954
|
return {
|
|
3787
3955
|
currentTimeUTC: (/* @__PURE__ */ new Date()).toISOString(),
|
|
@@ -3789,8 +3957,23 @@ var AIChatPanel = ({
|
|
|
3789
3957
|
userLanguage: navigator.language
|
|
3790
3958
|
};
|
|
3791
3959
|
}, []);
|
|
3792
|
-
const
|
|
3793
|
-
|
|
3960
|
+
const handleToggleSection = (0, import_react12.useCallback)((sectionId, enabled) => {
|
|
3961
|
+
if (propOnToggleSection) {
|
|
3962
|
+
propOnToggleSection(sectionId, enabled);
|
|
3963
|
+
} else {
|
|
3964
|
+
setInternalDisabledSectionIds((prev) => {
|
|
3965
|
+
const next = new Set(prev);
|
|
3966
|
+
if (enabled) {
|
|
3967
|
+
next.delete(sectionId);
|
|
3968
|
+
} else {
|
|
3969
|
+
next.add(sectionId);
|
|
3970
|
+
}
|
|
3971
|
+
return next;
|
|
3972
|
+
});
|
|
3973
|
+
}
|
|
3974
|
+
}, [propOnToggleSection]);
|
|
3975
|
+
const ensureConversation = (0, import_react12.useCallback)(() => {
|
|
3976
|
+
var _a2, _b;
|
|
3794
3977
|
console.log("ensureConversation - called with:", {
|
|
3795
3978
|
currentConversation,
|
|
3796
3979
|
createConversationOnFirstChat,
|
|
@@ -3805,7 +3988,7 @@ var AIChatPanel = ({
|
|
|
3805
3988
|
const requestBody = {
|
|
3806
3989
|
project_id,
|
|
3807
3990
|
agentId: agent,
|
|
3808
|
-
customerId: (
|
|
3991
|
+
customerId: (_a2 = customer == null ? void 0 : customer.customer_id) != null ? _a2 : null,
|
|
3809
3992
|
customerEmail: (_b = customer == null ? void 0 : customer.customer_user_email) != null ? _b : null,
|
|
3810
3993
|
timezone: browserInfo == null ? void 0 : browserInfo.userTimezone,
|
|
3811
3994
|
language: browserInfo == null ? void 0 : browserInfo.userLanguage
|
|
@@ -3843,11 +4026,11 @@ var AIChatPanel = ({
|
|
|
3843
4026
|
console.log("ensureConversation - using existing conversation:", currentConversation);
|
|
3844
4027
|
return Promise.resolve(currentConversation);
|
|
3845
4028
|
}, [currentConversation, createConversationOnFirstChat, publicAPIUrl, project_id, agent, customer, browserInfo]);
|
|
3846
|
-
const dataWithExtras = (0,
|
|
3847
|
-
var
|
|
4029
|
+
const dataWithExtras = (0, import_react12.useCallback)(() => {
|
|
4030
|
+
var _a2, _b, _c, _d, _e, _f, _g, _h;
|
|
3848
4031
|
return [
|
|
3849
4032
|
...data,
|
|
3850
|
-
{ key: "--customer_id", data: (
|
|
4033
|
+
{ key: "--customer_id", data: (_a2 = customer == null ? void 0 : customer.customer_id) != null ? _a2 : "" },
|
|
3851
4034
|
{ key: "--customer_name", data: (_b = customer == null ? void 0 : customer.customer_name) != null ? _b : "" },
|
|
3852
4035
|
{ key: "--customer_user_id", data: (_c = customer == null ? void 0 : customer.customer_user_id) != null ? _c : "" },
|
|
3853
4036
|
{ key: "--customer_user_name", data: (_d = customer == null ? void 0 : customer.customer_user_name) != null ? _d : "" },
|
|
@@ -3857,7 +4040,7 @@ var AIChatPanel = ({
|
|
|
3857
4040
|
{ key: "--userLanguage", data: (_h = browserInfo == null ? void 0 : browserInfo.userLanguage) != null ? _h : "" }
|
|
3858
4041
|
];
|
|
3859
4042
|
}, [data, customer, browserInfo]);
|
|
3860
|
-
const currentAgentInfo = (0,
|
|
4043
|
+
const currentAgentInfo = (0, import_react12.useMemo)(() => {
|
|
3861
4044
|
if (!currentAgentId || agentOptions.length === 0) return { label: null, avatarUrl: null };
|
|
3862
4045
|
const currentAgent = agentOptions.find((a) => a.value === currentAgentId);
|
|
3863
4046
|
return {
|
|
@@ -3867,21 +4050,191 @@ var AIChatPanel = ({
|
|
|
3867
4050
|
}, [currentAgentId, agentOptions]);
|
|
3868
4051
|
const currentAgentLabel = currentAgentInfo.label;
|
|
3869
4052
|
const currentAgentAvatarUrl = currentAgentInfo.avatarUrl;
|
|
3870
|
-
const
|
|
4053
|
+
const isEmailAddress = (email) => {
|
|
4054
|
+
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
|
4055
|
+
return emailRegex.test(email);
|
|
4056
|
+
};
|
|
4057
|
+
const convertMarkdownToHTML = (markdown) => {
|
|
4058
|
+
const html = import_server2.default.renderToStaticMarkup(
|
|
4059
|
+
/* @__PURE__ */ import_react12.default.createElement("div", { className: markdownClass }, /* @__PURE__ */ import_react12.default.createElement(
|
|
4060
|
+
import_react_markdown2.default,
|
|
4061
|
+
{
|
|
4062
|
+
remarkPlugins: [import_remark_gfm2.default],
|
|
4063
|
+
rehypePlugins: [import_rehype_raw2.default]
|
|
4064
|
+
},
|
|
4065
|
+
markdown
|
|
4066
|
+
))
|
|
4067
|
+
);
|
|
4068
|
+
return html;
|
|
4069
|
+
};
|
|
4070
|
+
const convertHistoryToHTML = (history2) => {
|
|
4071
|
+
const stylesheet = `
|
|
4072
|
+
<style>
|
|
4073
|
+
.conversation-history {
|
|
4074
|
+
font-family: Arial, sans-serif;
|
|
4075
|
+
line-height: 1.5;
|
|
4076
|
+
}
|
|
4077
|
+
.history-entry {
|
|
4078
|
+
margin-bottom: 15px;
|
|
4079
|
+
}
|
|
4080
|
+
.prompt-container, .response-container {
|
|
4081
|
+
margin-bottom: 10px;
|
|
4082
|
+
}
|
|
4083
|
+
.prompt, .response {
|
|
4084
|
+
display: block;
|
|
4085
|
+
margin: 5px 0;
|
|
4086
|
+
padding: 10px;
|
|
4087
|
+
border-radius: 5px;
|
|
4088
|
+
max-width: 80%;
|
|
4089
|
+
}
|
|
4090
|
+
.prompt {
|
|
4091
|
+
background-color: #efefef;
|
|
4092
|
+
margin-left: 0;
|
|
4093
|
+
}
|
|
4094
|
+
.response {
|
|
4095
|
+
background-color: #f0fcfd;
|
|
4096
|
+
margin-left: 25px;
|
|
4097
|
+
}
|
|
4098
|
+
</style>
|
|
4099
|
+
`;
|
|
4100
|
+
let html = `
|
|
4101
|
+
<html>
|
|
4102
|
+
<head>
|
|
4103
|
+
${stylesheet}
|
|
4104
|
+
</head>
|
|
4105
|
+
<body>
|
|
4106
|
+
<h1>Conversation History (${(/* @__PURE__ */ new Date()).toLocaleString()})</h1>
|
|
4107
|
+
<div class="conversation-history">
|
|
4108
|
+
`;
|
|
4109
|
+
Object.entries(history2).forEach(([prompt, response2], index) => {
|
|
4110
|
+
if (hideInitialPrompt && index === 0) {
|
|
4111
|
+
html += `
|
|
4112
|
+
<div class="history-entry">
|
|
4113
|
+
<div class="response-container">
|
|
4114
|
+
<div class="response">${convertMarkdownToHTML(response2.content)}</div>
|
|
4115
|
+
</div>
|
|
4116
|
+
</div>
|
|
4117
|
+
`;
|
|
4118
|
+
} else {
|
|
4119
|
+
html += `
|
|
4120
|
+
<div class="history-entry">
|
|
4121
|
+
<div class="prompt-container">
|
|
4122
|
+
<div class="prompt">${convertMarkdownToHTML(
|
|
4123
|
+
formatPromptForDisplay(prompt)
|
|
4124
|
+
)}</div>
|
|
4125
|
+
</div>
|
|
4126
|
+
<div class="response-container">
|
|
4127
|
+
<div class="response">${convertMarkdownToHTML(response2.content)}</div>
|
|
4128
|
+
</div>
|
|
4129
|
+
</div>
|
|
4130
|
+
`;
|
|
4131
|
+
}
|
|
4132
|
+
});
|
|
4133
|
+
html += `
|
|
4134
|
+
</div>
|
|
4135
|
+
</body>
|
|
4136
|
+
</html>
|
|
4137
|
+
`;
|
|
4138
|
+
return html;
|
|
4139
|
+
};
|
|
4140
|
+
const saveHTMLToFile = (html, filename) => {
|
|
4141
|
+
const blob = new Blob([html], { type: "text/html" });
|
|
4142
|
+
const link = document.createElement("a");
|
|
4143
|
+
link.href = URL.createObjectURL(blob);
|
|
4144
|
+
link.download = filename;
|
|
4145
|
+
document.body.appendChild(link);
|
|
4146
|
+
link.click();
|
|
4147
|
+
document.body.removeChild(link);
|
|
4148
|
+
};
|
|
4149
|
+
const saveAsHTMLFile = (0, import_react12.useCallback)(() => {
|
|
4150
|
+
saveHTMLToFile(
|
|
4151
|
+
convertHistoryToHTML(history),
|
|
4152
|
+
`conversation-${(/* @__PURE__ */ new Date()).toISOString()}.html`
|
|
4153
|
+
);
|
|
4154
|
+
interactionClicked(lastCallId || "", "save");
|
|
4155
|
+
}, [history, lastCallId]);
|
|
4156
|
+
const handleSendEmail = (to, from) => {
|
|
4157
|
+
sendConversationsViaEmail(to, `Conversation History from ${title}`, from);
|
|
4158
|
+
interactionClicked(lastCallId || "", "email", to);
|
|
4159
|
+
setEmailSent(true);
|
|
4160
|
+
};
|
|
4161
|
+
const sendConversationsViaEmail = (_0, ..._1) => __async(void 0, [_0, ..._1], function* (to, subject = `Conversation History from ${title}`, from = "") {
|
|
4162
|
+
fetch(`${publicAPIUrl}/share/email`, {
|
|
4163
|
+
method: "POST",
|
|
4164
|
+
headers: {
|
|
4165
|
+
"Content-Type": "application/json"
|
|
4166
|
+
},
|
|
4167
|
+
body: JSON.stringify({
|
|
4168
|
+
to,
|
|
4169
|
+
from,
|
|
4170
|
+
subject,
|
|
4171
|
+
html: convertHistoryToHTML(history),
|
|
4172
|
+
project_id: project_id != null ? project_id : "",
|
|
4173
|
+
customer,
|
|
4174
|
+
history,
|
|
4175
|
+
title
|
|
4176
|
+
})
|
|
4177
|
+
});
|
|
4178
|
+
yield interactionClicked(lastCallId || "", "email", from);
|
|
4179
|
+
});
|
|
4180
|
+
const sendCallToActionEmail = (0, import_react12.useCallback)((from) => __async(void 0, null, function* () {
|
|
4181
|
+
try {
|
|
4182
|
+
yield fetch(`${publicAPIUrl}/share/email`, {
|
|
4183
|
+
method: "POST",
|
|
4184
|
+
headers: {
|
|
4185
|
+
"Content-Type": "application/json"
|
|
4186
|
+
},
|
|
4187
|
+
body: JSON.stringify({
|
|
4188
|
+
to: callToActionEmailAddress,
|
|
4189
|
+
from,
|
|
4190
|
+
subject: `${callToActionEmailSubject} from ${from}`,
|
|
4191
|
+
html: convertHistoryToHTML(history),
|
|
4192
|
+
project_id: project_id != null ? project_id : "",
|
|
4193
|
+
customer,
|
|
4194
|
+
history,
|
|
4195
|
+
title
|
|
4196
|
+
})
|
|
4197
|
+
});
|
|
4198
|
+
yield interactionClicked(lastCallId || "", "cta", from);
|
|
4199
|
+
setCallToActionSent(true);
|
|
4200
|
+
} catch (err) {
|
|
4201
|
+
console.error("[AIChatPanel] Failed to send CTA email:", err);
|
|
4202
|
+
}
|
|
4203
|
+
}), [history, title, project_id, customer, lastCallId, publicAPIUrl, callToActionEmailAddress, callToActionEmailSubject]);
|
|
4204
|
+
const isDisabledDueToNoEmail = (0, import_react12.useCallback)(() => {
|
|
4205
|
+
if (customerEmailCaptureMode === "REQUIRED" && !emailInputSet) {
|
|
4206
|
+
return true;
|
|
4207
|
+
}
|
|
4208
|
+
return false;
|
|
4209
|
+
}, [customerEmailCaptureMode, emailInputSet]);
|
|
4210
|
+
const handleToolApproval = (0, import_react12.useCallback)((toolName, scope) => {
|
|
4211
|
+
if (scope === "session" || scope === "always") {
|
|
4212
|
+
setSessionApprovedTools((prev) => Array.from(/* @__PURE__ */ new Set([...prev, toolName])));
|
|
4213
|
+
}
|
|
4214
|
+
if (scope === "always") {
|
|
4215
|
+
setAlwaysApprovedTools((prev) => Array.from(/* @__PURE__ */ new Set([...prev, toolName])));
|
|
4216
|
+
}
|
|
4217
|
+
setPendingToolRequests((prev) => prev.filter((r) => r.toolName !== toolName));
|
|
4218
|
+
console.log(`[AIChatPanel] Tool "${toolName}" approved with scope: ${scope}`);
|
|
4219
|
+
}, []);
|
|
4220
|
+
const getUniqueToolNames = (0, import_react12.useCallback)(() => {
|
|
4221
|
+
return Array.from(new Set(pendingToolRequests.map((r) => r.toolName)));
|
|
4222
|
+
}, [pendingToolRequests]);
|
|
4223
|
+
const cleanContentForDisplay = (0, import_react12.useCallback)((content) => {
|
|
3871
4224
|
let cleaned = content.replace(/\*\*(.*?)\*\*/g, "$1").replace(/\*(.*?)\*/g, "$1").replace(/\n+/g, " ").replace(/\s+/g, " ").trim();
|
|
3872
4225
|
if (cleaned.length > 100) {
|
|
3873
4226
|
cleaned = cleaned.substring(0, 100) + "...";
|
|
3874
4227
|
}
|
|
3875
4228
|
return cleaned || "Thinking";
|
|
3876
4229
|
}, []);
|
|
3877
|
-
const processThinkingTags = (0,
|
|
3878
|
-
var
|
|
4230
|
+
const processThinkingTags = (0, import_react12.useCallback)((text) => {
|
|
4231
|
+
var _a2, _b;
|
|
3879
4232
|
const blocks = [];
|
|
3880
4233
|
let index = 0;
|
|
3881
4234
|
const reasoningRegex = /<reasoning>([\s\S]*?)<\/reasoning>/gi;
|
|
3882
4235
|
let match;
|
|
3883
4236
|
while ((match = reasoningRegex.exec(text)) !== null) {
|
|
3884
|
-
blocks.push({ type: "reasoning", content: (
|
|
4237
|
+
blocks.push({ type: "reasoning", content: (_a2 = match[1]) != null ? _a2 : "", index: index++ });
|
|
3885
4238
|
}
|
|
3886
4239
|
const searchingRegex = /<searching>([\s\S]*?)<\/searching>/gi;
|
|
3887
4240
|
while ((match = searchingRegex.exec(text)) !== null) {
|
|
@@ -3895,7 +4248,7 @@ var AIChatPanel = ({
|
|
|
3895
4248
|
pattern: "\\[SUGGEST_AGENT:([^|\\]]+)\\|([^|\\]]+)\\|([^\\]]+)\\]",
|
|
3896
4249
|
markdown: '<agent-suggestion data-agent-id="$1" data-agent-name="$2" data-reason="$3"></agent-suggestion>'
|
|
3897
4250
|
};
|
|
3898
|
-
const processActions = (0,
|
|
4251
|
+
const processActions = (0, import_react12.useCallback)((content) => {
|
|
3899
4252
|
const allActions = [AGENT_SUGGESTION_ACTION, ...actions || []];
|
|
3900
4253
|
let processed = content;
|
|
3901
4254
|
allActions.forEach((action) => {
|
|
@@ -3910,7 +4263,7 @@ var AIChatPanel = ({
|
|
|
3910
4263
|
});
|
|
3911
4264
|
return processed;
|
|
3912
4265
|
}, [actions]);
|
|
3913
|
-
const formatPromptForDisplay = (0,
|
|
4266
|
+
const formatPromptForDisplay = (0, import_react12.useCallback)((prompt) => {
|
|
3914
4267
|
let displayPrompt = prompt;
|
|
3915
4268
|
const isoTimestampRegex = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z:/;
|
|
3916
4269
|
if (isoTimestampRegex.test(displayPrompt)) {
|
|
@@ -3928,13 +4281,13 @@ var AIChatPanel = ({
|
|
|
3928
4281
|
}
|
|
3929
4282
|
return displayPrompt;
|
|
3930
4283
|
}, [hideRagContextInPrompt]);
|
|
3931
|
-
const interactionClicked = (0,
|
|
3932
|
-
var
|
|
4284
|
+
const interactionClicked = (0, import_react12.useCallback)((callId, action, emailaddress = "", comment = "") => __async(void 0, null, function* () {
|
|
4285
|
+
var _a2, _b;
|
|
3933
4286
|
console.log(`[AIChatPanel] Interaction: ${action} for callId: ${callId}`);
|
|
3934
4287
|
const convId = currentConversation || (yield ensureConversation());
|
|
3935
4288
|
const finalCallId = callId || convId;
|
|
3936
|
-
const
|
|
3937
|
-
const email = emailaddress && emailaddress !== "" ? emailaddress :
|
|
4289
|
+
const isEmailAddress2 = (str) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(str);
|
|
4290
|
+
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
4291
|
try {
|
|
3939
4292
|
yield fetch(`${publicAPIUrl}/feedback/${finalCallId}/${action}`, {
|
|
3940
4293
|
method: "POST",
|
|
@@ -3952,7 +4305,7 @@ var AIChatPanel = ({
|
|
|
3952
4305
|
console.error("[AIChatPanel] Failed to send feedback:", err);
|
|
3953
4306
|
}
|
|
3954
4307
|
}), [currentConversation, ensureConversation, customer, project_id, publicAPIUrl]);
|
|
3955
|
-
const copyToClipboard = (0,
|
|
4308
|
+
const copyToClipboard = (0, import_react12.useCallback)((text, callId) => __async(void 0, null, function* () {
|
|
3956
4309
|
try {
|
|
3957
4310
|
const cleanText = text.replace(/<[^>]*>/g, "").replace(/\*\*(.*?)\*\*/g, "$1").replace(/\*(.*?)\*/g, "$1").replace(/#{1,6}\s/g, "").replace(/\[([^\]]+)\]\([^)]+\)/g, "$1");
|
|
3958
4311
|
yield navigator.clipboard.writeText(cleanText);
|
|
@@ -3963,7 +4316,7 @@ var AIChatPanel = ({
|
|
|
3963
4316
|
console.error("Failed to copy:", err);
|
|
3964
4317
|
}
|
|
3965
4318
|
}), [interactionClicked]);
|
|
3966
|
-
const handleThumbsUp = (0,
|
|
4319
|
+
const handleThumbsUp = (0, import_react12.useCallback)((callId) => __async(void 0, null, function* () {
|
|
3967
4320
|
console.log("[AIChatPanel] Thumbs up clicked:", callId);
|
|
3968
4321
|
setFeedbackCallId({ callId, type: "up" });
|
|
3969
4322
|
setTimeout(() => setFeedbackCallId(null), 2e3);
|
|
@@ -3972,7 +4325,7 @@ var AIChatPanel = ({
|
|
|
3972
4325
|
thumbsUpClick(callId);
|
|
3973
4326
|
}
|
|
3974
4327
|
}), [thumbsUpClick, interactionClicked]);
|
|
3975
|
-
const handleThumbsDown = (0,
|
|
4328
|
+
const handleThumbsDown = (0, import_react12.useCallback)((callId) => __async(void 0, null, function* () {
|
|
3976
4329
|
console.log("[AIChatPanel] Thumbs down clicked:", callId);
|
|
3977
4330
|
setFeedbackCallId({ callId, type: "down" });
|
|
3978
4331
|
setTimeout(() => setFeedbackCallId(null), 2e3);
|
|
@@ -3981,24 +4334,24 @@ var AIChatPanel = ({
|
|
|
3981
4334
|
thumbsDownClick(callId);
|
|
3982
4335
|
}
|
|
3983
4336
|
}), [thumbsDownClick, interactionClicked]);
|
|
3984
|
-
const scrollToBottom = (0,
|
|
3985
|
-
var
|
|
4337
|
+
const scrollToBottom = (0, import_react12.useCallback)(() => {
|
|
4338
|
+
var _a2;
|
|
3986
4339
|
if (scrollRAFRef.current) {
|
|
3987
4340
|
cancelAnimationFrame(scrollRAFRef.current);
|
|
3988
4341
|
}
|
|
3989
4342
|
const now = Date.now();
|
|
3990
4343
|
if (now - lastScrollTimeRef.current < 100) {
|
|
3991
4344
|
scrollRAFRef.current = requestAnimationFrame(() => {
|
|
3992
|
-
var
|
|
3993
|
-
(
|
|
4345
|
+
var _a3;
|
|
4346
|
+
(_a3 = bottomRef.current) == null ? void 0 : _a3.scrollIntoView({ behavior: "auto" });
|
|
3994
4347
|
lastScrollTimeRef.current = Date.now();
|
|
3995
4348
|
});
|
|
3996
4349
|
return;
|
|
3997
4350
|
}
|
|
3998
|
-
(
|
|
4351
|
+
(_a2 = bottomRef.current) == null ? void 0 : _a2.scrollIntoView({ behavior: "auto" });
|
|
3999
4352
|
lastScrollTimeRef.current = now;
|
|
4000
4353
|
}, []);
|
|
4001
|
-
const continueChat = (0,
|
|
4354
|
+
const continueChat = (0, import_react12.useCallback)((promptText) => {
|
|
4002
4355
|
console.log("AIChatPanel.continueChat called with:", promptText);
|
|
4003
4356
|
setThinkingBlocks([]);
|
|
4004
4357
|
setCurrentThinkingIndex(0);
|
|
@@ -4053,11 +4406,6 @@ var AIChatPanel = ({
|
|
|
4053
4406
|
if (messagesAndHistory.length === 0 && promptTemplate) {
|
|
4054
4407
|
fullPromptToSend = promptTemplate.replace("{{prompt}}", fullPromptToSend);
|
|
4055
4408
|
}
|
|
4056
|
-
if (followOnPrompt) {
|
|
4057
|
-
fullPromptToSend += `
|
|
4058
|
-
|
|
4059
|
-
${followOnPrompt}`;
|
|
4060
|
-
}
|
|
4061
4409
|
const newController = new AbortController();
|
|
4062
4410
|
setLastController(newController);
|
|
4063
4411
|
send(
|
|
@@ -4125,7 +4473,6 @@ ${followOnPrompt}`;
|
|
|
4125
4473
|
clearFollowOnQuestionsNextPrompt,
|
|
4126
4474
|
history,
|
|
4127
4475
|
promptTemplate,
|
|
4128
|
-
followOnPrompt,
|
|
4129
4476
|
send,
|
|
4130
4477
|
service,
|
|
4131
4478
|
ensureConversation,
|
|
@@ -4134,13 +4481,13 @@ ${followOnPrompt}`;
|
|
|
4134
4481
|
onConversationCreated,
|
|
4135
4482
|
setResponse
|
|
4136
4483
|
]);
|
|
4137
|
-
const handleSuggestionClick = (0,
|
|
4484
|
+
const handleSuggestionClick = (0, import_react12.useCallback)((question) => {
|
|
4138
4485
|
continueChat(question);
|
|
4139
4486
|
}, [continueChat]);
|
|
4140
|
-
const handleStop = (0,
|
|
4487
|
+
const handleStop = (0, import_react12.useCallback)(() => {
|
|
4141
4488
|
stop(lastController);
|
|
4142
4489
|
}, [stop, lastController]);
|
|
4143
|
-
const handleNewConversation = (0,
|
|
4490
|
+
const handleNewConversation = (0, import_react12.useCallback)(() => {
|
|
4144
4491
|
if (!newConversationConfirm) {
|
|
4145
4492
|
setNewConversationConfirm(true);
|
|
4146
4493
|
setTimeout(() => setNewConversationConfirm(false), 3e3);
|
|
@@ -4167,12 +4514,12 @@ ${followOnPrompt}`;
|
|
|
4167
4514
|
setUserHasScrolled(false);
|
|
4168
4515
|
setError(null);
|
|
4169
4516
|
setTimeout(() => {
|
|
4170
|
-
var
|
|
4517
|
+
var _a2;
|
|
4171
4518
|
setJustReset(false);
|
|
4172
|
-
(
|
|
4519
|
+
(_a2 = responseAreaRef.current) == null ? void 0 : _a2.scrollTo({ top: 0, behavior: "smooth" });
|
|
4173
4520
|
}, 100);
|
|
4174
4521
|
}, [newConversationConfirm, idle, stop, lastController, setResponse, followOnQuestions]);
|
|
4175
|
-
(0,
|
|
4522
|
+
(0, import_react12.useEffect)(() => {
|
|
4176
4523
|
if (!response || !lastKey || justReset) return;
|
|
4177
4524
|
const { cleanedText, blocks } = processThinkingTags(response);
|
|
4178
4525
|
setThinkingBlocks(blocks);
|
|
@@ -4187,7 +4534,7 @@ ${followOnPrompt}`;
|
|
|
4187
4534
|
return newHistory;
|
|
4188
4535
|
});
|
|
4189
4536
|
}, [response, lastKey, lastCallId, processThinkingTags, justReset]);
|
|
4190
|
-
(0,
|
|
4537
|
+
(0, import_react12.useEffect)(() => {
|
|
4191
4538
|
const wasStreaming = !prevIdleRef.current;
|
|
4192
4539
|
const isNowIdle = idle;
|
|
4193
4540
|
prevIdleRef.current = idle;
|
|
@@ -4212,16 +4559,17 @@ ${followOnPrompt}`;
|
|
|
4212
4559
|
hasNotifiedCompletionRef.current = false;
|
|
4213
4560
|
}
|
|
4214
4561
|
}, [idle]);
|
|
4215
|
-
(0,
|
|
4216
|
-
|
|
4562
|
+
(0, import_react12.useEffect)(() => {
|
|
4563
|
+
const shouldAutoScroll = scrollToEnd || !userHasScrolled;
|
|
4564
|
+
if (!idle && shouldAutoScroll && response) {
|
|
4217
4565
|
scrollToBottom();
|
|
4218
4566
|
}
|
|
4219
|
-
}, [response, scrollToBottom, idle, userHasScrolled]);
|
|
4220
|
-
const idleRef = (0,
|
|
4567
|
+
}, [response, scrollToBottom, idle, userHasScrolled, scrollToEnd]);
|
|
4568
|
+
const idleRef = (0, import_react12.useRef)(idle);
|
|
4221
4569
|
idleRef.current = idle;
|
|
4222
|
-
const userHasScrolledRef = (0,
|
|
4570
|
+
const userHasScrolledRef = (0, import_react12.useRef)(userHasScrolled);
|
|
4223
4571
|
userHasScrolledRef.current = userHasScrolled;
|
|
4224
|
-
(0,
|
|
4572
|
+
(0, import_react12.useEffect)(() => {
|
|
4225
4573
|
const scrollArea = responseAreaRef.current;
|
|
4226
4574
|
if (!scrollArea) return;
|
|
4227
4575
|
const scrollViewport = scrollArea.querySelector("[data-radix-scroll-area-viewport]");
|
|
@@ -4240,16 +4588,16 @@ ${followOnPrompt}`;
|
|
|
4240
4588
|
scrollElement.addEventListener("scroll", handleScroll, { passive: true });
|
|
4241
4589
|
return () => scrollElement.removeEventListener("scroll", handleScroll);
|
|
4242
4590
|
}, []);
|
|
4243
|
-
(0,
|
|
4591
|
+
(0, import_react12.useEffect)(() => {
|
|
4244
4592
|
setFollowOnQuestionsState(followOnQuestions);
|
|
4245
4593
|
}, [followOnQuestions]);
|
|
4246
|
-
(0,
|
|
4594
|
+
(0, import_react12.useEffect)(() => {
|
|
4247
4595
|
const currentlyLoading = isLoading || !idle;
|
|
4248
4596
|
if (onLoadingChange) {
|
|
4249
4597
|
onLoadingChange(currentlyLoading);
|
|
4250
4598
|
}
|
|
4251
4599
|
}, [isLoading, idle, onLoadingChange]);
|
|
4252
|
-
(0,
|
|
4600
|
+
(0, import_react12.useEffect)(() => {
|
|
4253
4601
|
return () => {
|
|
4254
4602
|
if (scrollRAFRef.current) {
|
|
4255
4603
|
cancelAnimationFrame(scrollRAFRef.current);
|
|
@@ -4269,13 +4617,19 @@ ${followOnPrompt}`;
|
|
|
4269
4617
|
}
|
|
4270
4618
|
};
|
|
4271
4619
|
}, []);
|
|
4272
|
-
(0,
|
|
4620
|
+
(0, import_react12.useEffect)(() => {
|
|
4273
4621
|
if (initialPrompt && initialPrompt !== "" && !initialPromptSentRef.current) {
|
|
4274
4622
|
initialPromptSentRef.current = true;
|
|
4275
4623
|
continueChat(initialPrompt);
|
|
4276
4624
|
}
|
|
4277
4625
|
}, [initialPrompt, continueChat]);
|
|
4278
|
-
(0,
|
|
4626
|
+
(0, import_react12.useEffect)(() => {
|
|
4627
|
+
if (followOnPrompt && followOnPrompt !== "" && followOnPrompt !== lastFollowOnPromptRef.current) {
|
|
4628
|
+
lastFollowOnPromptRef.current = followOnPrompt;
|
|
4629
|
+
continueChat(followOnPrompt);
|
|
4630
|
+
}
|
|
4631
|
+
}, [followOnPrompt, continueChat]);
|
|
4632
|
+
(0, import_react12.useEffect)(() => {
|
|
4279
4633
|
if (llmError && llmError.trim()) {
|
|
4280
4634
|
console.log("[AIChatPanel] Error detected:", llmError);
|
|
4281
4635
|
const errorMessage = llmError;
|
|
@@ -4306,21 +4660,67 @@ ${followOnPrompt}`;
|
|
|
4306
4660
|
}
|
|
4307
4661
|
}
|
|
4308
4662
|
}, [llmError, lastKey, lastCallId]);
|
|
4309
|
-
|
|
4310
|
-
|
|
4663
|
+
(0, import_react12.useEffect)(() => {
|
|
4664
|
+
const existingLinks = document.querySelectorAll(
|
|
4665
|
+
'link[data-source="ai-chat-panel"]'
|
|
4666
|
+
);
|
|
4667
|
+
existingLinks.forEach((link) => {
|
|
4668
|
+
var _a2;
|
|
4669
|
+
return (_a2 = link.parentNode) == null ? void 0 : _a2.removeChild(link);
|
|
4670
|
+
});
|
|
4671
|
+
const existingStyles = document.querySelectorAll(
|
|
4672
|
+
'style[data-source="ai-chat-panel"]'
|
|
4673
|
+
);
|
|
4674
|
+
existingStyles.forEach((style) => {
|
|
4675
|
+
var _a2;
|
|
4676
|
+
return (_a2 = style.parentNode) == null ? void 0 : _a2.removeChild(style);
|
|
4677
|
+
});
|
|
4678
|
+
if (cssUrl) {
|
|
4679
|
+
if (cssUrl.startsWith("http://") || cssUrl.startsWith("https://")) {
|
|
4680
|
+
const link = document.createElement("link");
|
|
4681
|
+
link.href = cssUrl;
|
|
4682
|
+
link.rel = "stylesheet";
|
|
4683
|
+
link.setAttribute("data-source", "ai-chat-panel");
|
|
4684
|
+
document.head.appendChild(link);
|
|
4685
|
+
} else {
|
|
4686
|
+
const style = document.createElement("style");
|
|
4687
|
+
style.textContent = cssUrl;
|
|
4688
|
+
style.setAttribute("data-source", "ai-chat-panel");
|
|
4689
|
+
document.head.appendChild(style);
|
|
4690
|
+
}
|
|
4691
|
+
}
|
|
4692
|
+
return () => {
|
|
4693
|
+
const links = document.querySelectorAll(
|
|
4694
|
+
'link[data-source="ai-chat-panel"]'
|
|
4695
|
+
);
|
|
4696
|
+
links.forEach((link) => {
|
|
4697
|
+
var _a2;
|
|
4698
|
+
return (_a2 = link.parentNode) == null ? void 0 : _a2.removeChild(link);
|
|
4699
|
+
});
|
|
4700
|
+
const styles = document.querySelectorAll(
|
|
4701
|
+
'style[data-source="ai-chat-panel"]'
|
|
4702
|
+
);
|
|
4703
|
+
styles.forEach((style) => {
|
|
4704
|
+
var _a2;
|
|
4705
|
+
return (_a2 = style.parentNode) == null ? void 0 : _a2.removeChild(style);
|
|
4706
|
+
});
|
|
4707
|
+
};
|
|
4708
|
+
}, [cssUrl]);
|
|
4709
|
+
const CodeBlock = (0, import_react12.useCallback)((_b) => {
|
|
4710
|
+
var _c = _b, { node, inline, className, children } = _c, props = __objRest(_c, ["node", "inline", "className", "children"]);
|
|
4311
4711
|
const match = /language-(\w+)/.exec(className || "");
|
|
4312
|
-
return !inline && match ? /* @__PURE__ */
|
|
4712
|
+
return !inline && match ? /* @__PURE__ */ import_react12.default.createElement(
|
|
4313
4713
|
import_react_syntax_highlighter2.Prism,
|
|
4314
4714
|
__spreadValues({
|
|
4315
|
-
style:
|
|
4715
|
+
style: effectivePrismStyle,
|
|
4316
4716
|
language: match[1],
|
|
4317
4717
|
PreTag: "div"
|
|
4318
4718
|
}, props),
|
|
4319
4719
|
String(children).replace(/\n$/, "")
|
|
4320
|
-
) : /* @__PURE__ */
|
|
4321
|
-
}, [
|
|
4322
|
-
const AgentSuggestionCard =
|
|
4323
|
-
(0,
|
|
4720
|
+
) : /* @__PURE__ */ import_react12.default.createElement("code", __spreadValues({ className }, props), children);
|
|
4721
|
+
}, [effectivePrismStyle]);
|
|
4722
|
+
const AgentSuggestionCard = import_react12.default.memo(({ agentId, agentName, reason }) => {
|
|
4723
|
+
(0, import_react12.useEffect)(() => {
|
|
4324
4724
|
const timer = setTimeout(() => {
|
|
4325
4725
|
scrollToBottom();
|
|
4326
4726
|
}, 100);
|
|
@@ -4334,33 +4734,33 @@ ${followOnPrompt}`;
|
|
|
4334
4734
|
const avatarUrl = agentOption == null ? void 0 : agentOption.avatarUrl;
|
|
4335
4735
|
const isCurrentAgent = currentAgentId === agentId;
|
|
4336
4736
|
if (!isValidAgent || agentId.includes("{") || agentId.includes("$")) {
|
|
4337
|
-
return /* @__PURE__ */
|
|
4737
|
+
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
4738
|
"img",
|
|
4339
4739
|
{
|
|
4340
4740
|
src: avatarUrl,
|
|
4341
4741
|
alt: agentName,
|
|
4342
4742
|
className: "ai-chat-agent-suggestion__avatar"
|
|
4343
4743
|
}
|
|
4344
|
-
) : /* @__PURE__ */
|
|
4744
|
+
) : /* @__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
4745
|
}
|
|
4346
4746
|
if (isCurrentAgent) {
|
|
4347
|
-
return /* @__PURE__ */
|
|
4747
|
+
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
4748
|
"img",
|
|
4349
4749
|
{
|
|
4350
4750
|
src: avatarUrl,
|
|
4351
4751
|
alt: agentName,
|
|
4352
4752
|
className: "ai-chat-agent-suggestion__avatar"
|
|
4353
4753
|
}
|
|
4354
|
-
) : /* @__PURE__ */
|
|
4754
|
+
) : /* @__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
4755
|
}
|
|
4356
|
-
return /* @__PURE__ */
|
|
4756
|
+
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
4757
|
"img",
|
|
4358
4758
|
{
|
|
4359
4759
|
src: avatarUrl,
|
|
4360
4760
|
alt: agentName,
|
|
4361
4761
|
className: "ai-chat-agent-suggestion__avatar"
|
|
4362
4762
|
}
|
|
4363
|
-
) : /* @__PURE__ */
|
|
4763
|
+
) : /* @__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
4764
|
Button,
|
|
4365
4765
|
{
|
|
4366
4766
|
variant: "default",
|
|
@@ -4376,15 +4776,15 @@ ${followOnPrompt}`;
|
|
|
4376
4776
|
"Switch"
|
|
4377
4777
|
));
|
|
4378
4778
|
});
|
|
4379
|
-
const markdownComponents = (0,
|
|
4779
|
+
const markdownComponents = (0, import_react12.useMemo)(() => ({
|
|
4380
4780
|
code: CodeBlock,
|
|
4381
|
-
"agent-suggestion": (
|
|
4382
|
-
var _b =
|
|
4781
|
+
"agent-suggestion": (_a2) => {
|
|
4782
|
+
var _b = _a2, { node } = _b, props = __objRest(_b, ["node"]);
|
|
4383
4783
|
const agentId = props["data-agent-id"];
|
|
4384
4784
|
const agentName = props["data-agent-name"];
|
|
4385
4785
|
const reason = props["data-reason"];
|
|
4386
4786
|
if (!agentId) return null;
|
|
4387
|
-
return /* @__PURE__ */
|
|
4787
|
+
return /* @__PURE__ */ import_react12.default.createElement(
|
|
4388
4788
|
AgentSuggestionCard,
|
|
4389
4789
|
{
|
|
4390
4790
|
agentId,
|
|
@@ -4394,145 +4794,360 @@ ${followOnPrompt}`;
|
|
|
4394
4794
|
);
|
|
4395
4795
|
}
|
|
4396
4796
|
}), [CodeBlock, AgentSuggestionCard]);
|
|
4397
|
-
const renderThinkingBlocks = (0,
|
|
4797
|
+
const renderThinkingBlocks = (0, import_react12.useCallback)(() => {
|
|
4398
4798
|
if (thinkingBlocks.length === 0) return null;
|
|
4399
4799
|
const currentBlock = thinkingBlocks[currentThinkingIndex];
|
|
4400
4800
|
if (!currentBlock) return null;
|
|
4401
4801
|
const isReasoning = currentBlock.type === "reasoning";
|
|
4402
|
-
const icon = isReasoning ? /* @__PURE__ */
|
|
4802
|
+
const icon = isReasoning ? /* @__PURE__ */ import_react12.default.createElement(BrainIcon, null) : /* @__PURE__ */ import_react12.default.createElement(SearchIcon, null);
|
|
4403
4803
|
const title2 = isReasoning ? "Reasoning" : "Searching";
|
|
4404
|
-
return /* @__PURE__ */
|
|
4804
|
+
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
4805
|
"button",
|
|
4406
4806
|
{
|
|
4407
4807
|
onClick: () => setCurrentThinkingIndex(Math.max(0, currentThinkingIndex - 1)),
|
|
4408
4808
|
disabled: currentThinkingIndex === 0
|
|
4409
4809
|
},
|
|
4410
4810
|
"\u2039"
|
|
4411
|
-
), /* @__PURE__ */
|
|
4811
|
+
), /* @__PURE__ */ import_react12.default.createElement("span", null, currentThinkingIndex + 1, " / ", thinkingBlocks.length), /* @__PURE__ */ import_react12.default.createElement(
|
|
4412
4812
|
"button",
|
|
4413
4813
|
{
|
|
4414
4814
|
onClick: () => setCurrentThinkingIndex(Math.min(thinkingBlocks.length - 1, currentThinkingIndex + 1)),
|
|
4415
4815
|
disabled: currentThinkingIndex === thinkingBlocks.length - 1
|
|
4416
4816
|
},
|
|
4417
4817
|
"\u203A"
|
|
4418
|
-
))), /* @__PURE__ */
|
|
4818
|
+
))), /* @__PURE__ */ import_react12.default.createElement("div", { className: "ai-chat-thinking__content" }, cleanContentForDisplay(currentBlock.content)));
|
|
4419
4819
|
}, [thinkingBlocks, currentThinkingIndex, cleanContentForDisplay]);
|
|
4420
4820
|
const panelClasses = ["ai-chat-panel", theme === "dark" ? "dark-theme" : ""].filter(Boolean).join(" ");
|
|
4421
|
-
return /* @__PURE__ */
|
|
4422
|
-
"
|
|
4821
|
+
return /* @__PURE__ */ import_react12.default.createElement(
|
|
4822
|
+
"div",
|
|
4423
4823
|
{
|
|
4424
|
-
className:
|
|
4425
|
-
|
|
4426
|
-
"aria-label": "Dismiss error"
|
|
4824
|
+
className: panelClasses,
|
|
4825
|
+
style: __spreadValues(__spreadValues({}, width && { width }), height && { height })
|
|
4427
4826
|
},
|
|
4428
|
-
/* @__PURE__ */
|
|
4429
|
-
|
|
4430
|
-
|
|
4431
|
-
|
|
4432
|
-
|
|
4433
|
-
|
|
4434
|
-
|
|
4827
|
+
title && /* @__PURE__ */ import_react12.default.createElement("div", { className: "ai-chat-panel__title" }, title),
|
|
4828
|
+
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(
|
|
4829
|
+
"button",
|
|
4830
|
+
{
|
|
4831
|
+
className: "ai-chat-error-banner__close",
|
|
4832
|
+
onClick: () => setError(null),
|
|
4833
|
+
"aria-label": "Dismiss error"
|
|
4834
|
+
},
|
|
4835
|
+
/* @__PURE__ */ import_react12.default.createElement(CloseIcon, null)
|
|
4836
|
+
)),
|
|
4837
|
+
/* @__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
4838
|
import_react_markdown2.default,
|
|
4436
4839
|
{
|
|
4437
4840
|
remarkPlugins: [import_remark_gfm2.default],
|
|
4438
|
-
rehypePlugins: [import_rehype_raw2.default]
|
|
4439
|
-
components: markdownComponents
|
|
4841
|
+
rehypePlugins: [import_rehype_raw2.default]
|
|
4440
4842
|
},
|
|
4441
|
-
|
|
4442
|
-
)
|
|
4843
|
+
initialMessage
|
|
4844
|
+
)) : /* @__PURE__ */ import_react12.default.createElement(
|
|
4443
4845
|
import_react_markdown2.default,
|
|
4444
4846
|
{
|
|
4445
4847
|
remarkPlugins: [import_remark_gfm2.default],
|
|
4446
|
-
rehypePlugins: [import_rehype_raw2.default]
|
|
4447
|
-
components: markdownComponents
|
|
4848
|
+
rehypePlugins: [import_rehype_raw2.default]
|
|
4448
4849
|
},
|
|
4449
|
-
|
|
4450
|
-
))), (
|
|
4451
|
-
|
|
4850
|
+
initialMessage
|
|
4851
|
+
))), Object.entries(history).map(([prompt, entry], index, entries) => {
|
|
4852
|
+
const isLastEntry = index === entries.length - 1;
|
|
4853
|
+
const isSystemMessage = prompt.startsWith("__system__:");
|
|
4854
|
+
const { cleanedText } = processThinkingTags(entry.content);
|
|
4855
|
+
const processedContent = processActions(cleanedText);
|
|
4856
|
+
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(
|
|
4857
|
+
import_react_markdown2.default,
|
|
4858
|
+
{
|
|
4859
|
+
remarkPlugins: [import_remark_gfm2.default],
|
|
4860
|
+
rehypePlugins: [import_rehype_raw2.default],
|
|
4861
|
+
components: markdownComponents
|
|
4862
|
+
},
|
|
4863
|
+
processedContent
|
|
4864
|
+
)) : /* @__PURE__ */ import_react12.default.createElement(
|
|
4865
|
+
import_react_markdown2.default,
|
|
4866
|
+
{
|
|
4867
|
+
remarkPlugins: [import_remark_gfm2.default],
|
|
4868
|
+
rehypePlugins: [import_rehype_raw2.default],
|
|
4869
|
+
components: markdownComponents
|
|
4870
|
+
},
|
|
4871
|
+
processedContent
|
|
4872
|
+
) : /* @__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(
|
|
4873
|
+
import_react_markdown2.default,
|
|
4874
|
+
{
|
|
4875
|
+
remarkPlugins: [import_remark_gfm2.default],
|
|
4876
|
+
rehypePlugins: [import_rehype_raw2.default],
|
|
4877
|
+
components: markdownComponents
|
|
4878
|
+
},
|
|
4879
|
+
processedContent
|
|
4880
|
+
)) : /* @__PURE__ */ import_react12.default.createElement(
|
|
4881
|
+
import_react_markdown2.default,
|
|
4882
|
+
{
|
|
4883
|
+
remarkPlugins: [import_remark_gfm2.default],
|
|
4884
|
+
rehypePlugins: [import_rehype_raw2.default],
|
|
4885
|
+
components: markdownComponents
|
|
4886
|
+
},
|
|
4887
|
+
processedContent
|
|
4888
|
+
))), (!isLastEntry || !isLoading) && /* @__PURE__ */ import_react12.default.createElement("div", { className: "ai-chat-message__actions" }, /* @__PURE__ */ import_react12.default.createElement(
|
|
4889
|
+
"button",
|
|
4890
|
+
{
|
|
4891
|
+
className: "ai-chat-action-button",
|
|
4892
|
+
onClick: () => copyToClipboard(entry.content, entry.callId),
|
|
4893
|
+
title: copiedCallId === entry.callId ? "Copied!" : "Copy"
|
|
4894
|
+
},
|
|
4895
|
+
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" }))
|
|
4896
|
+
), /* @__PURE__ */ import_react12.default.createElement(
|
|
4897
|
+
"button",
|
|
4898
|
+
{
|
|
4899
|
+
className: "ai-chat-action-button",
|
|
4900
|
+
onClick: () => handleThumbsUp(entry.callId),
|
|
4901
|
+
title: (feedbackCallId == null ? void 0 : feedbackCallId.callId) === entry.callId && (feedbackCallId == null ? void 0 : feedbackCallId.type) === "up" ? "Thanks!" : "Good response",
|
|
4902
|
+
style: (feedbackCallId == null ? void 0 : feedbackCallId.callId) === entry.callId && (feedbackCallId == null ? void 0 : feedbackCallId.type) === "up" ? { color: "#22c55e" } : void 0
|
|
4903
|
+
},
|
|
4904
|
+
(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" }))
|
|
4905
|
+
), /* @__PURE__ */ import_react12.default.createElement(
|
|
4906
|
+
"button",
|
|
4907
|
+
{
|
|
4908
|
+
className: "ai-chat-action-button",
|
|
4909
|
+
onClick: () => handleThumbsDown(entry.callId),
|
|
4910
|
+
title: (feedbackCallId == null ? void 0 : feedbackCallId.callId) === entry.callId && (feedbackCallId == null ? void 0 : feedbackCallId.type) === "down" ? "Thanks!" : "Poor response",
|
|
4911
|
+
style: (feedbackCallId == null ? void 0 : feedbackCallId.callId) === entry.callId && (feedbackCallId == null ? void 0 : feedbackCallId.type) === "down" ? { color: "#ef4444" } : void 0
|
|
4912
|
+
},
|
|
4913
|
+
(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" }))
|
|
4914
|
+
), (entry.toolCalls || entry.toolResponses) && /* @__PURE__ */ import_react12.default.createElement(
|
|
4915
|
+
"button",
|
|
4916
|
+
{
|
|
4917
|
+
className: "ai-chat-action-button",
|
|
4918
|
+
onClick: () => {
|
|
4919
|
+
setToolInfoData({
|
|
4920
|
+
calls: entry.toolCalls || [],
|
|
4921
|
+
responses: entry.toolResponses || []
|
|
4922
|
+
});
|
|
4923
|
+
setIsToolInfoModalOpen(true);
|
|
4924
|
+
},
|
|
4925
|
+
title: "View tool information"
|
|
4926
|
+
},
|
|
4927
|
+
/* @__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" }))
|
|
4928
|
+
))));
|
|
4929
|
+
}), followOnQuestionsState.length > 0 && idle && !isLoading && /* @__PURE__ */ import_react12.default.createElement("div", { className: "ai-chat-suggestions" }, followOnQuestionsState.map((question, index) => /* @__PURE__ */ import_react12.default.createElement(
|
|
4930
|
+
Button,
|
|
4452
4931
|
{
|
|
4453
|
-
|
|
4454
|
-
|
|
4455
|
-
|
|
4932
|
+
key: index,
|
|
4933
|
+
variant: "outline",
|
|
4934
|
+
size: "sm",
|
|
4935
|
+
onClick: () => handleSuggestionClick(question),
|
|
4936
|
+
className: "ai-chat-suggestions__button"
|
|
4456
4937
|
},
|
|
4457
|
-
|
|
4458
|
-
), /* @__PURE__ */
|
|
4459
|
-
|
|
4938
|
+
question
|
|
4939
|
+
))), /* @__PURE__ */ import_react12.default.createElement("div", { ref: bottomRef })),
|
|
4940
|
+
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(
|
|
4941
|
+
Button,
|
|
4460
4942
|
{
|
|
4461
|
-
|
|
4462
|
-
|
|
4463
|
-
|
|
4464
|
-
|
|
4943
|
+
size: "sm",
|
|
4944
|
+
variant: "outline",
|
|
4945
|
+
className: "ai-chat-approve-tools-button",
|
|
4946
|
+
onClick: () => handleToolApproval(toolName, "once")
|
|
4465
4947
|
},
|
|
4466
|
-
|
|
4467
|
-
), /* @__PURE__ */
|
|
4948
|
+
"Once"
|
|
4949
|
+
), /* @__PURE__ */ import_react12.default.createElement(
|
|
4950
|
+
Button,
|
|
4951
|
+
{
|
|
4952
|
+
size: "sm",
|
|
4953
|
+
variant: "outline",
|
|
4954
|
+
className: "ai-chat-approve-tools-button",
|
|
4955
|
+
onClick: () => handleToolApproval(toolName, "session")
|
|
4956
|
+
},
|
|
4957
|
+
"This Session"
|
|
4958
|
+
), /* @__PURE__ */ import_react12.default.createElement(
|
|
4959
|
+
Button,
|
|
4960
|
+
{
|
|
4961
|
+
size: "sm",
|
|
4962
|
+
variant: "default",
|
|
4963
|
+
className: "ai-chat-approve-tools-button",
|
|
4964
|
+
onClick: () => handleToolApproval(toolName, "always")
|
|
4965
|
+
},
|
|
4966
|
+
"Always"
|
|
4967
|
+
))))),
|
|
4968
|
+
(showSaveButton || showEmailButton || showCallToAction) && /* @__PURE__ */ import_react12.default.createElement("div", { className: "ai-chat-button-container" }, showSaveButton && /* @__PURE__ */ import_react12.default.createElement(
|
|
4969
|
+
Button,
|
|
4970
|
+
{
|
|
4971
|
+
variant: "outline",
|
|
4972
|
+
size: "sm",
|
|
4973
|
+
onClick: saveAsHTMLFile,
|
|
4974
|
+
disabled: Object.keys(history).length === 0,
|
|
4975
|
+
className: "ai-chat-save-button"
|
|
4976
|
+
},
|
|
4977
|
+
"\u{1F4BE} Save"
|
|
4978
|
+
), showEmailButton && /* @__PURE__ */ import_react12.default.createElement(
|
|
4979
|
+
Button,
|
|
4980
|
+
{
|
|
4981
|
+
variant: "outline",
|
|
4982
|
+
size: "sm",
|
|
4983
|
+
onClick: () => {
|
|
4984
|
+
if (isEmailAddress(emailInput)) {
|
|
4985
|
+
setEmailInputSet(true);
|
|
4986
|
+
setEmailValid(true);
|
|
4987
|
+
handleSendEmail(emailInput, emailInput);
|
|
4988
|
+
setEmailClickedButNoEmail(false);
|
|
4989
|
+
} else {
|
|
4990
|
+
setShowEmailPanel(true);
|
|
4991
|
+
setEmailValid(false);
|
|
4992
|
+
setEmailClickedButNoEmail(true);
|
|
4993
|
+
}
|
|
4994
|
+
},
|
|
4995
|
+
disabled: Object.keys(history).length === 0 || isDisabledDueToNoEmail(),
|
|
4996
|
+
className: "ai-chat-email-button"
|
|
4997
|
+
},
|
|
4998
|
+
"\u{1F4E7} Email Conversation",
|
|
4999
|
+
emailSent ? " \u2713" : ""
|
|
5000
|
+
), showCallToAction && /* @__PURE__ */ import_react12.default.createElement(
|
|
5001
|
+
Button,
|
|
5002
|
+
{
|
|
5003
|
+
variant: callToActionSent ? "outline" : "default",
|
|
5004
|
+
size: "sm",
|
|
5005
|
+
onClick: () => {
|
|
5006
|
+
if (customerEmailCaptureMode !== "HIDE" && !emailInputSet) {
|
|
5007
|
+
setCTAClickedButNoEmail(true);
|
|
5008
|
+
setTimeout(() => setCTAClickedButNoEmail(false), 3e3);
|
|
5009
|
+
return;
|
|
5010
|
+
}
|
|
5011
|
+
const fromEmail = emailInput || (customer == null ? void 0 : customer.customer_user_email) || "";
|
|
5012
|
+
sendCallToActionEmail(fromEmail);
|
|
5013
|
+
},
|
|
5014
|
+
disabled: callToActionSent || Object.keys(history).length === 0,
|
|
5015
|
+
className: "ai-chat-cta-button"
|
|
5016
|
+
},
|
|
5017
|
+
callToActionSent ? "\u2713 Submitted" : callToActionButtonText
|
|
5018
|
+
)),
|
|
5019
|
+
showNewConversationButton && /* @__PURE__ */ import_react12.default.createElement("div", { className: "ai-chat-panel__new-conversation" }, /* @__PURE__ */ import_react12.default.createElement(
|
|
5020
|
+
Button,
|
|
5021
|
+
{
|
|
5022
|
+
variant: newConversationConfirm ? "destructive" : "outline",
|
|
5023
|
+
size: "sm",
|
|
5024
|
+
onClick: handleNewConversation,
|
|
5025
|
+
className: "ai-chat-new-conversation"
|
|
5026
|
+
},
|
|
5027
|
+
newConversationConfirm ? "Click to Confirm" : "New Conversation"
|
|
5028
|
+
)),
|
|
5029
|
+
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(
|
|
5030
|
+
"input",
|
|
5031
|
+
{
|
|
5032
|
+
type: "email",
|
|
5033
|
+
name: "email",
|
|
5034
|
+
id: "email",
|
|
5035
|
+
className: emailValid ? emailInputSet ? "ai-chat-email-input-set" : "ai-chat-email-input" : "ai-chat-email-input-invalid",
|
|
5036
|
+
placeholder: customerEmailCapturePlaceholder,
|
|
5037
|
+
value: emailInput,
|
|
5038
|
+
onChange: (e) => {
|
|
5039
|
+
const newEmail = e.target.value;
|
|
5040
|
+
setEmailInput(newEmail);
|
|
5041
|
+
if (!emailInputSet) {
|
|
5042
|
+
if (customerEmailCaptureMode === "REQUIRED" && newEmail !== "") {
|
|
5043
|
+
setEmailValid(isEmailAddress(newEmail));
|
|
5044
|
+
} else {
|
|
5045
|
+
setEmailValid(true);
|
|
5046
|
+
}
|
|
5047
|
+
}
|
|
5048
|
+
},
|
|
5049
|
+
onBlur: () => {
|
|
5050
|
+
if (emailInput && isEmailAddress(emailInput) && !emailInputSet) {
|
|
5051
|
+
setEmailInputSet(true);
|
|
5052
|
+
setEmailValid(true);
|
|
5053
|
+
interactionClicked("", "emailcapture", emailInput);
|
|
5054
|
+
if (CTAClickedButNoEmail) {
|
|
5055
|
+
sendCallToActionEmail(emailInput);
|
|
5056
|
+
setCTAClickedButNoEmail(false);
|
|
5057
|
+
}
|
|
5058
|
+
if (emailClickedButNoEmail) {
|
|
5059
|
+
handleSendEmail(emailInput, emailInput);
|
|
5060
|
+
setEmailClickedButNoEmail(false);
|
|
5061
|
+
}
|
|
5062
|
+
} else if (customerEmailCaptureMode === "REQUIRED" && emailInput !== "") {
|
|
5063
|
+
setEmailValid(isEmailAddress(emailInput));
|
|
5064
|
+
}
|
|
5065
|
+
},
|
|
5066
|
+
onKeyDown: (e) => {
|
|
5067
|
+
if (e.key === "Enter") {
|
|
5068
|
+
if (isEmailAddress(emailInput)) {
|
|
5069
|
+
setEmailInputSet(true);
|
|
5070
|
+
setEmailValid(true);
|
|
5071
|
+
interactionClicked("", "emailcapture", emailInput);
|
|
5072
|
+
if (CTAClickedButNoEmail) {
|
|
5073
|
+
sendCallToActionEmail(emailInput);
|
|
5074
|
+
setCTAClickedButNoEmail(false);
|
|
5075
|
+
}
|
|
5076
|
+
if (emailClickedButNoEmail) {
|
|
5077
|
+
handleSendEmail(emailInput, emailInput);
|
|
5078
|
+
setEmailClickedButNoEmail(false);
|
|
5079
|
+
}
|
|
5080
|
+
} else {
|
|
5081
|
+
setEmailValid(false);
|
|
5082
|
+
}
|
|
5083
|
+
}
|
|
5084
|
+
},
|
|
5085
|
+
disabled: false
|
|
5086
|
+
}
|
|
5087
|
+
), emailInputSet && /* @__PURE__ */ import_react12.default.createElement(
|
|
4468
5088
|
"button",
|
|
4469
5089
|
{
|
|
4470
|
-
className: "ai-chat-
|
|
4471
|
-
onClick: () =>
|
|
4472
|
-
|
|
4473
|
-
|
|
5090
|
+
className: "ai-chat-email-edit-button",
|
|
5091
|
+
onClick: () => {
|
|
5092
|
+
setEmailInputSet(false);
|
|
5093
|
+
setEmailValid(true);
|
|
5094
|
+
},
|
|
5095
|
+
title: "Edit email"
|
|
4474
5096
|
},
|
|
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
|
-
|
|
4512
|
-
|
|
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")))));
|
|
5097
|
+
"\u270E"
|
|
5098
|
+
))),
|
|
5099
|
+
/* @__PURE__ */ import_react12.default.createElement(
|
|
5100
|
+
ChatInput,
|
|
5101
|
+
{
|
|
5102
|
+
placeholder,
|
|
5103
|
+
idle,
|
|
5104
|
+
onSubmit: continueChat,
|
|
5105
|
+
onStop: handleStop,
|
|
5106
|
+
agentOptions,
|
|
5107
|
+
currentAgentId,
|
|
5108
|
+
onAgentChange,
|
|
5109
|
+
agentsLoading,
|
|
5110
|
+
currentAgentLabel: currentAgentLabel || void 0,
|
|
5111
|
+
currentAgentAvatarUrl: currentAgentAvatarUrl || void 0,
|
|
5112
|
+
contextSections,
|
|
5113
|
+
totalContextTokens,
|
|
5114
|
+
maxContextTokens,
|
|
5115
|
+
enableContextDetailView,
|
|
5116
|
+
disabledSectionIds,
|
|
5117
|
+
onToggleSection: handleToggleSection
|
|
5118
|
+
}
|
|
5119
|
+
),
|
|
5120
|
+
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(
|
|
5121
|
+
"span",
|
|
5122
|
+
{
|
|
5123
|
+
className: `ai-chat-tools-status__dot ${toolsLoading ? "loading" : toolsFetchError ? "error" : "ready"}`
|
|
5124
|
+
}
|
|
5125
|
+
), /* @__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")))),
|
|
5126
|
+
/* @__PURE__ */ import_react12.default.createElement(
|
|
5127
|
+
ToolInfoModal_default2,
|
|
5128
|
+
{
|
|
5129
|
+
isOpen: isToolInfoModalOpen,
|
|
5130
|
+
onClose: () => setIsToolInfoModalOpen(false),
|
|
5131
|
+
data: toolInfoData
|
|
5132
|
+
}
|
|
5133
|
+
)
|
|
5134
|
+
);
|
|
4520
5135
|
};
|
|
4521
|
-
var AIChatPanel_default =
|
|
5136
|
+
var AIChatPanel_default = import_react12.default.memo(AIChatPanel);
|
|
4522
5137
|
|
|
4523
5138
|
// src/hooks/useAgentRegistry.ts
|
|
4524
|
-
var
|
|
5139
|
+
var import_react13 = require("react");
|
|
4525
5140
|
var resolveApiEndpoint = (baseUrl, agentId) => {
|
|
4526
5141
|
return `https://api.llmasaservice.io/agents/${agentId}`;
|
|
4527
5142
|
};
|
|
4528
5143
|
function useAgentRegistry(agentIds, options = {}) {
|
|
4529
5144
|
const { url = "https://chat.llmasaservice.io", autoFetch = true, localOverrides = {} } = options;
|
|
4530
|
-
const [state, setState] = (0,
|
|
5145
|
+
const [state, setState] = (0, import_react13.useState)({
|
|
4531
5146
|
agents: {},
|
|
4532
5147
|
isLoading: false,
|
|
4533
5148
|
error: null
|
|
4534
5149
|
});
|
|
4535
|
-
const fetchAgentMetadata = (0,
|
|
5150
|
+
const fetchAgentMetadata = (0, import_react13.useCallback)(
|
|
4536
5151
|
(agentId, signal) => __async(this, null, function* () {
|
|
4537
5152
|
const endpoint = resolveApiEndpoint(url, agentId);
|
|
4538
5153
|
try {
|
|
@@ -4583,7 +5198,7 @@ function useAgentRegistry(agentIds, options = {}) {
|
|
|
4583
5198
|
}),
|
|
4584
5199
|
[url]
|
|
4585
5200
|
);
|
|
4586
|
-
const fetchAllAgents = (0,
|
|
5201
|
+
const fetchAllAgents = (0, import_react13.useCallback)(() => __async(this, null, function* () {
|
|
4587
5202
|
if (agentIds.length === 0) return;
|
|
4588
5203
|
setState((prev) => __spreadProps(__spreadValues({}, prev), { isLoading: true, error: null }));
|
|
4589
5204
|
const controller = new AbortController();
|
|
@@ -4610,7 +5225,7 @@ function useAgentRegistry(agentIds, options = {}) {
|
|
|
4610
5225
|
});
|
|
4611
5226
|
return () => controller.abort();
|
|
4612
5227
|
}), [agentIds, fetchAgentMetadata]);
|
|
4613
|
-
(0,
|
|
5228
|
+
(0, import_react13.useEffect)(() => {
|
|
4614
5229
|
if (!autoFetch) return;
|
|
4615
5230
|
const abortController = new AbortController();
|
|
4616
5231
|
const agentsToFetch = agentIds.filter(
|
|
@@ -4620,20 +5235,20 @@ function useAgentRegistry(agentIds, options = {}) {
|
|
|
4620
5235
|
fetchAllAgents();
|
|
4621
5236
|
return () => abortController.abort();
|
|
4622
5237
|
}, [agentIds.join(","), autoFetch]);
|
|
4623
|
-
const getAgent = (0,
|
|
5238
|
+
const getAgent = (0, import_react13.useCallback)(
|
|
4624
5239
|
(agentId) => {
|
|
4625
5240
|
return state.agents[agentId];
|
|
4626
5241
|
},
|
|
4627
5242
|
[state.agents]
|
|
4628
5243
|
);
|
|
4629
|
-
const isAgentReady = (0,
|
|
5244
|
+
const isAgentReady = (0, import_react13.useCallback)(
|
|
4630
5245
|
(agentId) => {
|
|
4631
5246
|
var _a;
|
|
4632
5247
|
return ((_a = state.agents[agentId]) == null ? void 0 : _a.status) === "ready";
|
|
4633
5248
|
},
|
|
4634
5249
|
[state.agents]
|
|
4635
5250
|
);
|
|
4636
|
-
const buildAgentAwarenessInstructions = (0,
|
|
5251
|
+
const buildAgentAwarenessInstructions = (0, import_react13.useCallback)(
|
|
4637
5252
|
(currentAgentId) => {
|
|
4638
5253
|
const otherAgents = agentIds.filter((id) => id !== currentAgentId).map((id) => {
|
|
4639
5254
|
const profile = state.agents[id];
|
|
@@ -4665,13 +5280,13 @@ Example: "I think ${(exampleAgent == null ? void 0 : exampleAgent.name) || "anot
|
|
|
4665
5280
|
},
|
|
4666
5281
|
[agentIds, state.agents, localOverrides]
|
|
4667
5282
|
);
|
|
4668
|
-
const readyAgents = (0,
|
|
5283
|
+
const readyAgents = (0, import_react13.useMemo)(() => {
|
|
4669
5284
|
return agentIds.filter((id) => {
|
|
4670
5285
|
var _a;
|
|
4671
5286
|
return ((_a = state.agents[id]) == null ? void 0 : _a.status) === "ready";
|
|
4672
5287
|
});
|
|
4673
5288
|
}, [agentIds, state.agents]);
|
|
4674
|
-
const agentList = (0,
|
|
5289
|
+
const agentList = (0, import_react13.useMemo)(() => {
|
|
4675
5290
|
return agentIds.map((id) => {
|
|
4676
5291
|
const profile = state.agents[id];
|
|
4677
5292
|
const metadata = profile == null ? void 0 : profile.metadata;
|
|
@@ -4720,15 +5335,15 @@ function extractAgentNameFromMessage(message) {
|
|
|
4720
5335
|
}
|
|
4721
5336
|
|
|
4722
5337
|
// 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__ */
|
|
5338
|
+
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" }));
|
|
5339
|
+
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" }));
|
|
5340
|
+
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" }));
|
|
5341
|
+
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" }));
|
|
5342
|
+
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" }));
|
|
5343
|
+
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" }));
|
|
5344
|
+
var LoadingDotIcon = () => /* @__PURE__ */ import_react14.default.createElement("span", { className: "ai-agent-panel__loading-dot" });
|
|
5345
|
+
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" }));
|
|
5346
|
+
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
5347
|
var normalizeConversationListPayload = (payload) => {
|
|
4733
5348
|
if (!payload) return [];
|
|
4734
5349
|
const conversations = Array.isArray(payload) ? payload : payload.conversations || [];
|
|
@@ -4850,26 +5465,44 @@ var ChatPanelWrapper = ({
|
|
|
4850
5465
|
totalContextTokens,
|
|
4851
5466
|
maxContextTokens,
|
|
4852
5467
|
enableContextDetailView,
|
|
5468
|
+
disabledSectionIds,
|
|
5469
|
+
onToggleSection,
|
|
4853
5470
|
onConversationCreated,
|
|
4854
|
-
conversationInitialPrompt
|
|
5471
|
+
conversationInitialPrompt,
|
|
5472
|
+
// New props from ChatPanel port
|
|
5473
|
+
cssUrl,
|
|
5474
|
+
markdownClass,
|
|
5475
|
+
width,
|
|
5476
|
+
height,
|
|
5477
|
+
scrollToEnd,
|
|
5478
|
+
prismStyle,
|
|
5479
|
+
showSaveButton,
|
|
5480
|
+
showEmailButton,
|
|
5481
|
+
messages,
|
|
5482
|
+
showCallToAction,
|
|
5483
|
+
callToActionButtonText,
|
|
5484
|
+
callToActionEmailAddress,
|
|
5485
|
+
callToActionEmailSubject,
|
|
5486
|
+
customerEmailCaptureMode,
|
|
5487
|
+
customerEmailCapturePlaceholder
|
|
4855
5488
|
}) => {
|
|
4856
|
-
var _a, _b;
|
|
5489
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
|
|
4857
5490
|
const convAgentProfile = getAgent(activeConv.agentId);
|
|
4858
5491
|
const convAgentMetadata = convAgentProfile == null ? void 0 : convAgentProfile.metadata;
|
|
4859
5492
|
const isVisible = currentConversationId === activeConv.conversationId;
|
|
4860
|
-
const historyCallback = (0,
|
|
5493
|
+
const historyCallback = (0, import_react14.useCallback)(
|
|
4861
5494
|
(history) => {
|
|
4862
5495
|
handleHistoryChanged(history, activeConv.conversationId);
|
|
4863
5496
|
},
|
|
4864
5497
|
[handleHistoryChanged, activeConv.conversationId]
|
|
4865
5498
|
);
|
|
4866
|
-
const loadingCallback = (0,
|
|
5499
|
+
const loadingCallback = (0, import_react14.useCallback)(
|
|
4867
5500
|
(loading) => {
|
|
4868
5501
|
handleLoadingChange(loading, activeConv.conversationId);
|
|
4869
5502
|
},
|
|
4870
5503
|
[handleLoadingChange, activeConv.conversationId]
|
|
4871
5504
|
);
|
|
4872
|
-
const conversationCreatedCallback = (0,
|
|
5505
|
+
const conversationCreatedCallback = (0, import_react14.useCallback)(
|
|
4873
5506
|
(realConversationId) => {
|
|
4874
5507
|
onConversationCreated(activeConv.conversationId, realConversationId);
|
|
4875
5508
|
},
|
|
@@ -4884,18 +5517,18 @@ var ChatPanelWrapper = ({
|
|
|
4884
5517
|
const prompts = promptsString ? promptsString.split("|").filter((p) => p.trim()) : [];
|
|
4885
5518
|
effectiveFollowOnQuestions = [...prompts];
|
|
4886
5519
|
}
|
|
4887
|
-
const mcpServers = (0,
|
|
5520
|
+
const mcpServers = (0, import_react14.useMemo)(() => {
|
|
4888
5521
|
return (convAgentProfile == null ? void 0 : convAgentProfile.mcpServers) || EMPTY_ARRAY;
|
|
4889
5522
|
}, [convAgentProfile == null ? void 0 : convAgentProfile.mcpServers]);
|
|
4890
5523
|
const effectiveInitialPrompt = conversationInitialPrompt || initialPrompt;
|
|
4891
5524
|
if (!convAgentMetadata) return null;
|
|
4892
|
-
return /* @__PURE__ */
|
|
5525
|
+
return /* @__PURE__ */ import_react14.default.createElement(
|
|
4893
5526
|
"div",
|
|
4894
5527
|
{
|
|
4895
5528
|
className: "ai-agent-panel__chat-wrapper",
|
|
4896
5529
|
style: { display: isVisible ? "flex" : "none" }
|
|
4897
5530
|
},
|
|
4898
|
-
/* @__PURE__ */
|
|
5531
|
+
/* @__PURE__ */ import_react14.default.createElement(
|
|
4899
5532
|
AIChatPanel_default,
|
|
4900
5533
|
{
|
|
4901
5534
|
project_id: convAgentMetadata.projectId,
|
|
@@ -4920,7 +5553,7 @@ var ChatPanelWrapper = ({
|
|
|
4920
5553
|
customer: effectiveCustomer,
|
|
4921
5554
|
showPoweredBy,
|
|
4922
5555
|
showNewConversationButton: false,
|
|
4923
|
-
createConversationOnFirstChat: (_b =
|
|
5556
|
+
createConversationOnFirstChat: (_b = convAgentProfile == null ? void 0 : convAgentProfile.createConversationOnFirstChat) != null ? _b : true,
|
|
4924
5557
|
mcpServers,
|
|
4925
5558
|
actions,
|
|
4926
5559
|
followOnQuestions: effectiveFollowOnQuestions,
|
|
@@ -4935,15 +5568,33 @@ var ChatPanelWrapper = ({
|
|
|
4935
5568
|
totalContextTokens,
|
|
4936
5569
|
maxContextTokens,
|
|
4937
5570
|
enableContextDetailView,
|
|
4938
|
-
|
|
5571
|
+
disabledSectionIds,
|
|
5572
|
+
onToggleSection,
|
|
5573
|
+
onConversationCreated: conversationCreatedCallback,
|
|
5574
|
+
cssUrl,
|
|
5575
|
+
markdownClass,
|
|
5576
|
+
width,
|
|
5577
|
+
height,
|
|
5578
|
+
scrollToEnd: scrollToEnd != null ? scrollToEnd : convAgentMetadata.displayAutoScroll,
|
|
5579
|
+
prismStyle,
|
|
5580
|
+
showSaveButton: (_c = showSaveButton != null ? showSaveButton : convAgentMetadata.displayShowSaveButton) != null ? _c : true,
|
|
5581
|
+
showEmailButton: (_d = showEmailButton != null ? showEmailButton : convAgentMetadata.displayShowEmailButton) != null ? _d : true,
|
|
5582
|
+
messages,
|
|
5583
|
+
showCallToAction: (_e = showCallToAction != null ? showCallToAction : convAgentMetadata.displayShowCallToAction) != null ? _e : false,
|
|
5584
|
+
callToActionButtonText: (_f = callToActionButtonText != null ? callToActionButtonText : convAgentMetadata.displayCallToActionButtonText) != null ? _f : "Submit",
|
|
5585
|
+
callToActionEmailAddress: (_g = callToActionEmailAddress != null ? callToActionEmailAddress : convAgentMetadata.displayCallToActionEmailAddress) != null ? _g : "",
|
|
5586
|
+
callToActionEmailSubject: (_h = callToActionEmailSubject != null ? callToActionEmailSubject : convAgentMetadata.displayCallToActionEmailSubject) != null ? _h : "Agent CTA submitted",
|
|
5587
|
+
customerEmailCaptureMode: (_i = customerEmailCaptureMode != null ? customerEmailCaptureMode : convAgentMetadata == null ? void 0 : convAgentMetadata.customerEmailCaptureMode) != null ? _i : "HIDE",
|
|
5588
|
+
customerEmailCapturePlaceholder: (_j = customerEmailCapturePlaceholder != null ? customerEmailCapturePlaceholder : convAgentMetadata == null ? void 0 : convAgentMetadata.customerEmailCapturePlaceholder) != null ? _j : "Please enter your email..."
|
|
4939
5589
|
}
|
|
4940
5590
|
)
|
|
4941
5591
|
);
|
|
4942
5592
|
};
|
|
4943
5593
|
ChatPanelWrapper.displayName = "ChatPanelWrapper";
|
|
4944
|
-
var AIAgentPanel =
|
|
5594
|
+
var AIAgentPanel = import_react14.default.forwardRef(({
|
|
4945
5595
|
agents,
|
|
4946
5596
|
defaultAgent,
|
|
5597
|
+
selectedAgent,
|
|
4947
5598
|
customerId,
|
|
4948
5599
|
apiKey,
|
|
4949
5600
|
context,
|
|
@@ -4980,37 +5631,53 @@ var AIAgentPanel = import_react13.default.forwardRef(({
|
|
|
4980
5631
|
followOnQuestions = [],
|
|
4981
5632
|
followOnPrompt = "",
|
|
4982
5633
|
historyListLimit = 50,
|
|
4983
|
-
showConversationHistory = true
|
|
5634
|
+
showConversationHistory = true,
|
|
5635
|
+
// New props from ChatPanel port
|
|
5636
|
+
cssUrl,
|
|
5637
|
+
markdownClass,
|
|
5638
|
+
width,
|
|
5639
|
+
height,
|
|
5640
|
+
scrollToEnd,
|
|
5641
|
+
prismStyle,
|
|
5642
|
+
showSaveButton,
|
|
5643
|
+
showEmailButton,
|
|
5644
|
+
messages,
|
|
5645
|
+
showCallToAction,
|
|
5646
|
+
callToActionButtonText,
|
|
5647
|
+
callToActionEmailAddress,
|
|
5648
|
+
callToActionEmailSubject,
|
|
5649
|
+
customerEmailCaptureMode,
|
|
5650
|
+
customerEmailCapturePlaceholder
|
|
4984
5651
|
}, ref) => {
|
|
4985
5652
|
var _a, _b, _c, _d;
|
|
4986
|
-
const [isCollapsed, setIsCollapsed] = (0,
|
|
4987
|
-
const [isHistoryCollapsed, setIsHistoryCollapsed] = (0,
|
|
5653
|
+
const [isCollapsed, setIsCollapsed] = (0, import_react14.useState)(collapsible && defaultCollapsed);
|
|
5654
|
+
const [isHistoryCollapsed, setIsHistoryCollapsed] = (0, import_react14.useState)(() => {
|
|
4988
5655
|
if (typeof window !== "undefined") {
|
|
4989
5656
|
const saved = localStorage.getItem("ai-agent-panel-history-collapsed");
|
|
4990
5657
|
return saved === "true";
|
|
4991
5658
|
}
|
|
4992
5659
|
return false;
|
|
4993
5660
|
});
|
|
4994
|
-
const [panelWidth, setPanelWidth] = (0,
|
|
5661
|
+
const [panelWidth, setPanelWidth] = (0, import_react14.useState)(() => {
|
|
4995
5662
|
if (typeof window !== "undefined") {
|
|
4996
5663
|
const savedWidth = localStorage.getItem("ai-agent-panel-width");
|
|
4997
5664
|
if (savedWidth) {
|
|
4998
|
-
const
|
|
4999
|
-
if (
|
|
5000
|
-
return
|
|
5665
|
+
const width2 = parseInt(savedWidth, 10);
|
|
5666
|
+
if (width2 >= minWidth && width2 <= maxWidth) {
|
|
5667
|
+
return width2;
|
|
5001
5668
|
}
|
|
5002
5669
|
}
|
|
5003
5670
|
}
|
|
5004
5671
|
return defaultWidth;
|
|
5005
5672
|
});
|
|
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,
|
|
5673
|
+
const [isResizing, setIsResizing] = (0, import_react14.useState)(false);
|
|
5674
|
+
const [showSearch, setShowSearch] = (0, import_react14.useState)(false);
|
|
5675
|
+
const [showHandoffDialog, setShowHandoffDialog] = (0, import_react14.useState)(false);
|
|
5676
|
+
const [suggestedAgent, setSuggestedAgent] = (0, import_react14.useState)(null);
|
|
5677
|
+
const [handoffSource, setHandoffSource] = (0, import_react14.useState)("agent");
|
|
5678
|
+
const panelRef = (0, import_react14.useRef)(null);
|
|
5679
|
+
const resizeRef = (0, import_react14.useRef)(null);
|
|
5680
|
+
const { agentIds, localOverrides } = (0, import_react14.useMemo)(() => {
|
|
5014
5681
|
const ids = [];
|
|
5015
5682
|
const overrides = {};
|
|
5016
5683
|
for (const agent of agents) {
|
|
@@ -5028,25 +5695,48 @@ var AIAgentPanel = import_react13.default.forwardRef(({
|
|
|
5028
5695
|
}
|
|
5029
5696
|
return { agentIds: ids, localOverrides: overrides };
|
|
5030
5697
|
}, [agents]);
|
|
5031
|
-
const [currentAgentId, setCurrentAgentId] = (0,
|
|
5698
|
+
const [currentAgentId, setCurrentAgentId] = (0, import_react14.useState)(
|
|
5032
5699
|
defaultAgent || agentIds[0] || ""
|
|
5033
5700
|
);
|
|
5034
|
-
|
|
5035
|
-
|
|
5036
|
-
|
|
5037
|
-
|
|
5038
|
-
|
|
5039
|
-
|
|
5040
|
-
|
|
5041
|
-
|
|
5042
|
-
|
|
5043
|
-
|
|
5701
|
+
(0, import_react14.useEffect)(() => {
|
|
5702
|
+
if (selectedAgent && selectedAgent !== currentAgentId) {
|
|
5703
|
+
const oldAgentId = currentAgentId;
|
|
5704
|
+
setCurrentAgentId(selectedAgent);
|
|
5705
|
+
if (onAgentSwitch) {
|
|
5706
|
+
onAgentSwitch(oldAgentId, selectedAgent);
|
|
5707
|
+
}
|
|
5708
|
+
if (currentConversationIdRef.current) {
|
|
5709
|
+
setActiveConversations((prev) => {
|
|
5710
|
+
const existing = prev.get(currentConversationIdRef.current);
|
|
5711
|
+
if (existing) {
|
|
5712
|
+
const next = new Map(prev);
|
|
5713
|
+
next.set(currentConversationIdRef.current, __spreadProps(__spreadValues({}, existing), {
|
|
5714
|
+
agentId: selectedAgent
|
|
5715
|
+
}));
|
|
5716
|
+
return next;
|
|
5717
|
+
}
|
|
5718
|
+
return prev;
|
|
5719
|
+
});
|
|
5720
|
+
}
|
|
5721
|
+
}
|
|
5722
|
+
}, [selectedAgent]);
|
|
5723
|
+
const [apiConversations, setApiConversations] = (0, import_react14.useState)([]);
|
|
5724
|
+
const [conversationsLoading, setConversationsLoading] = (0, import_react14.useState)(false);
|
|
5725
|
+
const [conversationsError, setConversationsError] = (0, import_react14.useState)(null);
|
|
5726
|
+
const [searchQuery, setSearchQuery] = (0, import_react14.useState)("");
|
|
5727
|
+
const [activeConversations, setActiveConversations] = (0, import_react14.useState)(/* @__PURE__ */ new Map());
|
|
5728
|
+
const [currentConversationId, setCurrentConversationId] = (0, import_react14.useState)(conversation || null);
|
|
5729
|
+
const [conversationFirstPrompts, setConversationFirstPrompts] = (0, import_react14.useState)({});
|
|
5730
|
+
const [loadingPrompts, setLoadingPrompts] = (0, import_react14.useState)(/* @__PURE__ */ new Set());
|
|
5731
|
+
const [loadingConversationId, setLoadingConversationId] = (0, import_react14.useState)(null);
|
|
5732
|
+
const [expandedSections, setExpandedSections] = (0, import_react14.useState)({
|
|
5044
5733
|
"Today": true,
|
|
5045
5734
|
"Yesterday": true,
|
|
5046
5735
|
"This Week": false,
|
|
5047
5736
|
"This Month": false,
|
|
5048
5737
|
"Older": false
|
|
5049
5738
|
});
|
|
5739
|
+
const [disabledContextSections, setDisabledContextSections] = (0, import_react14.useState)(/* @__PURE__ */ new Map());
|
|
5050
5740
|
const {
|
|
5051
5741
|
agents: agentProfiles,
|
|
5052
5742
|
isLoading: agentsLoading,
|
|
@@ -5054,16 +5744,16 @@ var AIAgentPanel = import_react13.default.forwardRef(({
|
|
|
5054
5744
|
buildAgentAwarenessInstructions,
|
|
5055
5745
|
agentList
|
|
5056
5746
|
} = 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,
|
|
5747
|
+
const fetchInProgressRef = (0, import_react14.useRef)(false);
|
|
5748
|
+
const lastFetchedAgentRef = (0, import_react14.useRef)(null);
|
|
5749
|
+
const checkedPromptsRef = (0, import_react14.useRef)(/* @__PURE__ */ new Set());
|
|
5750
|
+
const fetchingPromptsRef = (0, import_react14.useRef)(/* @__PURE__ */ new Set());
|
|
5751
|
+
const failedPromptsRef = (0, import_react14.useRef)(/* @__PURE__ */ new Map());
|
|
5752
|
+
const activeConversationsRef = (0, import_react14.useRef)(activeConversations);
|
|
5063
5753
|
activeConversationsRef.current = activeConversations;
|
|
5064
|
-
const currentConversationIdRef = (0,
|
|
5754
|
+
const currentConversationIdRef = (0, import_react14.useRef)(currentConversationId);
|
|
5065
5755
|
currentConversationIdRef.current = currentConversationId;
|
|
5066
|
-
|
|
5756
|
+
import_react14.default.useImperativeHandle(ref, () => ({
|
|
5067
5757
|
startNewConversation: (prompt, agent) => {
|
|
5068
5758
|
const targetAgent = agent || currentAgentId;
|
|
5069
5759
|
const tempId = `new-${Date.now()}`;
|
|
@@ -5086,11 +5776,11 @@ var AIAgentPanel = import_react13.default.forwardRef(({
|
|
|
5086
5776
|
}
|
|
5087
5777
|
}
|
|
5088
5778
|
}), [currentAgentId, onConversationChange]);
|
|
5089
|
-
const [showContextNotification, setShowContextNotification] = (0,
|
|
5090
|
-
const prevContextRef = (0,
|
|
5091
|
-
const contextNotificationTimeoutRef = (0,
|
|
5092
|
-
const prevDefaultAgentRef = (0,
|
|
5093
|
-
const fetchFirstPrompt = (0,
|
|
5779
|
+
const [showContextNotification, setShowContextNotification] = (0, import_react14.useState)(false);
|
|
5780
|
+
const prevContextRef = (0, import_react14.useRef)(null);
|
|
5781
|
+
const contextNotificationTimeoutRef = (0, import_react14.useRef)(null);
|
|
5782
|
+
const prevDefaultAgentRef = (0, import_react14.useRef)(null);
|
|
5783
|
+
const fetchFirstPrompt = (0, import_react14.useCallback)((conversationId, agentIdForConversation) => __async(void 0, null, function* () {
|
|
5094
5784
|
var _a2, _b2;
|
|
5095
5785
|
if (checkedPromptsRef.current.has(conversationId)) {
|
|
5096
5786
|
return;
|
|
@@ -5176,7 +5866,7 @@ var AIAgentPanel = import_react13.default.forwardRef(({
|
|
|
5176
5866
|
});
|
|
5177
5867
|
}
|
|
5178
5868
|
}), [apiKey, currentAgentId, getAgent]);
|
|
5179
|
-
const fetchConversations = (0,
|
|
5869
|
+
const fetchConversations = (0, import_react14.useCallback)((agentId, signal) => __async(void 0, null, function* () {
|
|
5180
5870
|
var _a2;
|
|
5181
5871
|
const agentProfile = getAgent(agentId);
|
|
5182
5872
|
const projectId = (_a2 = agentProfile == null ? void 0 : agentProfile.metadata) == null ? void 0 : _a2.projectId;
|
|
@@ -5190,13 +5880,8 @@ var AIAgentPanel = import_react13.default.forwardRef(({
|
|
|
5190
5880
|
fetchInProgressRef.current = true;
|
|
5191
5881
|
setConversationsLoading(true);
|
|
5192
5882
|
setConversationsError(null);
|
|
5193
|
-
console.log("projectId", projectId);
|
|
5194
|
-
console.log("customerId", customerId);
|
|
5195
|
-
console.log("apiKey", apiKey);
|
|
5196
5883
|
try {
|
|
5197
|
-
console.log("fetchConversations - customerId:", customerId);
|
|
5198
5884
|
const url2 = `https://api.llmasaservice.io/conversations?customer_id=${customerId}`;
|
|
5199
|
-
console.log("fetchConversations - URL:", url2);
|
|
5200
5885
|
const response = yield fetch(url2, {
|
|
5201
5886
|
signal,
|
|
5202
5887
|
headers: {
|
|
@@ -5232,7 +5917,7 @@ var AIAgentPanel = import_react13.default.forwardRef(({
|
|
|
5232
5917
|
}
|
|
5233
5918
|
}
|
|
5234
5919
|
}), [apiKey, customerId, getAgent, fetchFirstPrompt]);
|
|
5235
|
-
const stripContextFromPrompt = (0,
|
|
5920
|
+
const stripContextFromPrompt = (0, import_react14.useCallback)((prompt) => {
|
|
5236
5921
|
let cleanPrompt = prompt;
|
|
5237
5922
|
const contextIndex = cleanPrompt.indexOf("---context---");
|
|
5238
5923
|
if (contextIndex !== -1) {
|
|
@@ -5248,7 +5933,7 @@ var AIAgentPanel = import_react13.default.forwardRef(({
|
|
|
5248
5933
|
}
|
|
5249
5934
|
return cleanPrompt.trim();
|
|
5250
5935
|
}, []);
|
|
5251
|
-
const loadConversationTranscript = (0,
|
|
5936
|
+
const loadConversationTranscript = (0, import_react14.useCallback)((conversationId, agentIdForConversation, title) => __async(void 0, null, function* () {
|
|
5252
5937
|
var _a2;
|
|
5253
5938
|
const existingActive = activeConversationsRef.current.get(conversationId);
|
|
5254
5939
|
if (existingActive) {
|
|
@@ -5332,10 +6017,10 @@ var AIAgentPanel = import_react13.default.forwardRef(({
|
|
|
5332
6017
|
setLoadingConversationId(null);
|
|
5333
6018
|
}
|
|
5334
6019
|
}), [apiKey, currentAgentId, getAgent, onConversationChange, stripContextFromPrompt]);
|
|
5335
|
-
const handleRefreshConversations = (0,
|
|
6020
|
+
const handleRefreshConversations = (0, import_react14.useCallback)(() => {
|
|
5336
6021
|
fetchConversations(currentAgentId);
|
|
5337
6022
|
}, [currentAgentId, fetchConversations]);
|
|
5338
|
-
(0,
|
|
6023
|
+
(0, import_react14.useEffect)(() => {
|
|
5339
6024
|
var _a2;
|
|
5340
6025
|
if (!showConversationHistory) return;
|
|
5341
6026
|
if (!agentsLoading && currentAgentId && apiKey) {
|
|
@@ -5347,7 +6032,7 @@ var AIAgentPanel = import_react13.default.forwardRef(({
|
|
|
5347
6032
|
}
|
|
5348
6033
|
}
|
|
5349
6034
|
}, [agentsLoading, currentAgentId, apiKey, fetchConversations, getAgent, showConversationHistory]);
|
|
5350
|
-
const handleNewConversation = (0,
|
|
6035
|
+
const handleNewConversation = (0, import_react14.useCallback)(() => {
|
|
5351
6036
|
const tempId = `new-${Date.now()}`;
|
|
5352
6037
|
setActiveConversations((prev) => {
|
|
5353
6038
|
const next = new Map(prev);
|
|
@@ -5364,7 +6049,7 @@ var AIAgentPanel = import_react13.default.forwardRef(({
|
|
|
5364
6049
|
});
|
|
5365
6050
|
setCurrentConversationId(tempId);
|
|
5366
6051
|
}, [currentAgentId]);
|
|
5367
|
-
(0,
|
|
6052
|
+
(0, import_react14.useEffect)(() => {
|
|
5368
6053
|
var _a2;
|
|
5369
6054
|
const agentProfile = getAgent(currentAgentId);
|
|
5370
6055
|
const isAgentReady = (_a2 = agentProfile == null ? void 0 : agentProfile.metadata) == null ? void 0 : _a2.projectId;
|
|
@@ -5372,7 +6057,7 @@ var AIAgentPanel = import_react13.default.forwardRef(({
|
|
|
5372
6057
|
handleNewConversation();
|
|
5373
6058
|
}
|
|
5374
6059
|
}, [currentAgentId, agentsLoading, activeConversations.size, getAgent, handleNewConversation]);
|
|
5375
|
-
const handleCloseConversation = (0,
|
|
6060
|
+
const handleCloseConversation = (0, import_react14.useCallback)((conversationId, e) => {
|
|
5376
6061
|
var _a2;
|
|
5377
6062
|
if (e) {
|
|
5378
6063
|
e.stopPropagation();
|
|
@@ -5388,10 +6073,10 @@ var AIAgentPanel = import_react13.default.forwardRef(({
|
|
|
5388
6073
|
setCurrentConversationId(nextId);
|
|
5389
6074
|
}
|
|
5390
6075
|
}, []);
|
|
5391
|
-
const handleSelectConversation = (0,
|
|
6076
|
+
const handleSelectConversation = (0, import_react14.useCallback)((conversationId) => {
|
|
5392
6077
|
loadConversationTranscript(conversationId);
|
|
5393
6078
|
}, [loadConversationTranscript]);
|
|
5394
|
-
const toggleSection = (0,
|
|
6079
|
+
const toggleSection = (0, import_react14.useCallback)((sectionLabel) => {
|
|
5395
6080
|
setExpandedSections((prev) => {
|
|
5396
6081
|
const isExpanding = !prev[sectionLabel];
|
|
5397
6082
|
if (isExpanding) {
|
|
@@ -5425,7 +6110,7 @@ var AIAgentPanel = import_react13.default.forwardRef(({
|
|
|
5425
6110
|
});
|
|
5426
6111
|
});
|
|
5427
6112
|
}, [apiConversations, fetchFirstPrompt]);
|
|
5428
|
-
const groupedConversations = (0,
|
|
6113
|
+
const groupedConversations = (0, import_react14.useMemo)(() => {
|
|
5429
6114
|
let filtered = apiConversations;
|
|
5430
6115
|
if (searchQuery) {
|
|
5431
6116
|
const query = searchQuery.toLowerCase();
|
|
@@ -5440,12 +6125,12 @@ var AIAgentPanel = import_react13.default.forwardRef(({
|
|
|
5440
6125
|
}
|
|
5441
6126
|
return groupConversationsByTime(filtered, true);
|
|
5442
6127
|
}, [apiConversations, searchQuery, conversationFirstPrompts]);
|
|
5443
|
-
const effectiveCustomer = (0,
|
|
6128
|
+
const effectiveCustomer = (0, import_react14.useMemo)(() => {
|
|
5444
6129
|
return __spreadProps(__spreadValues({}, customer), {
|
|
5445
6130
|
customer_id: customerId
|
|
5446
6131
|
});
|
|
5447
6132
|
}, [customer, customerId]);
|
|
5448
|
-
const handleResizeStart = (0,
|
|
6133
|
+
const handleResizeStart = (0, import_react14.useCallback)((e) => {
|
|
5449
6134
|
e.preventDefault();
|
|
5450
6135
|
setIsResizing(true);
|
|
5451
6136
|
let currentWidth = panelWidth;
|
|
@@ -5465,18 +6150,18 @@ var AIAgentPanel = import_react13.default.forwardRef(({
|
|
|
5465
6150
|
document.addEventListener("mousemove", handleMouseMove);
|
|
5466
6151
|
document.addEventListener("mouseup", handleMouseUp);
|
|
5467
6152
|
}, [panelWidth, minWidth, maxWidth, position]);
|
|
5468
|
-
const currentAgentProfile = (0,
|
|
6153
|
+
const currentAgentProfile = (0, import_react14.useMemo)(() => {
|
|
5469
6154
|
return getAgent(currentAgentId);
|
|
5470
6155
|
}, [currentAgentId, getAgent]);
|
|
5471
6156
|
const currentAgentMetadata = currentAgentProfile == null ? void 0 : currentAgentProfile.metadata;
|
|
5472
|
-
const currentActiveConversation = (0,
|
|
6157
|
+
const currentActiveConversation = (0, import_react14.useMemo)(() => {
|
|
5473
6158
|
if (!currentConversationId) return null;
|
|
5474
6159
|
return activeConversations.get(currentConversationId) || null;
|
|
5475
6160
|
}, [currentConversationId, activeConversations]);
|
|
5476
|
-
const activeConversationsList = (0,
|
|
6161
|
+
const activeConversationsList = (0, import_react14.useMemo)(() => {
|
|
5477
6162
|
return Array.from(activeConversations.values());
|
|
5478
6163
|
}, [activeConversations]);
|
|
5479
|
-
const agentOptions = (0,
|
|
6164
|
+
const agentOptions = (0, import_react14.useMemo)(() => {
|
|
5480
6165
|
return agentList.map((agent) => ({
|
|
5481
6166
|
value: agent.id,
|
|
5482
6167
|
label: agent.name,
|
|
@@ -5484,7 +6169,7 @@ var AIAgentPanel = import_react13.default.forwardRef(({
|
|
|
5484
6169
|
avatarUrl: agent.avatarUrl
|
|
5485
6170
|
}));
|
|
5486
6171
|
}, [agentList]);
|
|
5487
|
-
const mergedContext = (0,
|
|
6172
|
+
const mergedContext = (0, import_react14.useMemo)(() => {
|
|
5488
6173
|
const sections = [
|
|
5489
6174
|
...sharedContextSections,
|
|
5490
6175
|
...pageContextSections,
|
|
@@ -5506,7 +6191,7 @@ var AIAgentPanel = import_react13.default.forwardRef(({
|
|
|
5506
6191
|
totalTokens
|
|
5507
6192
|
};
|
|
5508
6193
|
}, [context, sharedContextSections, pageContextSections, contextDataSources]);
|
|
5509
|
-
(0,
|
|
6194
|
+
(0, import_react14.useEffect)(() => {
|
|
5510
6195
|
const contextString = JSON.stringify(mergedContext.sections.map((s) => ({ id: s.id, data: s.data })));
|
|
5511
6196
|
if (prevContextRef.current === null) {
|
|
5512
6197
|
prevContextRef.current = contextString;
|
|
@@ -5526,14 +6211,14 @@ var AIAgentPanel = import_react13.default.forwardRef(({
|
|
|
5526
6211
|
}, 3e3);
|
|
5527
6212
|
}
|
|
5528
6213
|
}, [mergedContext.sections]);
|
|
5529
|
-
(0,
|
|
6214
|
+
(0, import_react14.useEffect)(() => {
|
|
5530
6215
|
return () => {
|
|
5531
6216
|
if (contextNotificationTimeoutRef.current) {
|
|
5532
6217
|
clearTimeout(contextNotificationTimeoutRef.current);
|
|
5533
6218
|
}
|
|
5534
6219
|
};
|
|
5535
6220
|
}, []);
|
|
5536
|
-
(0,
|
|
6221
|
+
(0, import_react14.useEffect)(() => {
|
|
5537
6222
|
var _a2, _b2;
|
|
5538
6223
|
let foundDefaultAgent = null;
|
|
5539
6224
|
for (const section of pageContextSections) {
|
|
@@ -5580,8 +6265,21 @@ var AIAgentPanel = import_react13.default.forwardRef(({
|
|
|
5580
6265
|
});
|
|
5581
6266
|
}
|
|
5582
6267
|
}, [pageContextSections, currentAgentId, agentIds, getAgent, localOverrides]);
|
|
5583
|
-
const
|
|
5584
|
-
|
|
6268
|
+
const currentDisabledSections = (0, import_react14.useMemo)(() => {
|
|
6269
|
+
return currentConversationId ? disabledContextSections.get(currentConversationId) || /* @__PURE__ */ new Set() : /* @__PURE__ */ new Set();
|
|
6270
|
+
}, [currentConversationId, disabledContextSections]);
|
|
6271
|
+
const filteredContext = (0, import_react14.useMemo)(() => {
|
|
6272
|
+
const enabledSections = mergedContext.sections.filter(
|
|
6273
|
+
(section) => !currentDisabledSections.has(section.id)
|
|
6274
|
+
);
|
|
6275
|
+
const totalTokens = enabledSections.reduce((sum, s) => sum + (s.tokens || 0), 0);
|
|
6276
|
+
return {
|
|
6277
|
+
sections: enabledSections,
|
|
6278
|
+
totalTokens
|
|
6279
|
+
};
|
|
6280
|
+
}, [mergedContext.sections, currentDisabledSections]);
|
|
6281
|
+
const chatPanelData = (0, import_react14.useMemo)(() => {
|
|
6282
|
+
const contextData = filteredContext.sections.map((section) => ({
|
|
5585
6283
|
key: section.id,
|
|
5586
6284
|
data: JSON.stringify(section.data)
|
|
5587
6285
|
}));
|
|
@@ -5595,8 +6293,8 @@ var AIAgentPanel = import_react13.default.forwardRef(({
|
|
|
5595
6293
|
}
|
|
5596
6294
|
}
|
|
5597
6295
|
return [...data, ...contextData];
|
|
5598
|
-
}, [data,
|
|
5599
|
-
const handleAgentSwitch = (0,
|
|
6296
|
+
}, [data, filteredContext.sections, buildAgentAwarenessInstructions, currentAgentId, enableAgentSuggestions]);
|
|
6297
|
+
const handleAgentSwitch = (0, import_react14.useCallback)(
|
|
5600
6298
|
(newAgentId) => {
|
|
5601
6299
|
const oldAgentId = currentAgentId;
|
|
5602
6300
|
setCurrentAgentId(newAgentId);
|
|
@@ -5619,7 +6317,7 @@ var AIAgentPanel = import_react13.default.forwardRef(({
|
|
|
5619
6317
|
},
|
|
5620
6318
|
[currentAgentId, onAgentSwitch]
|
|
5621
6319
|
);
|
|
5622
|
-
const handleConversationSelect = (0,
|
|
6320
|
+
const handleConversationSelect = (0, import_react14.useCallback)(
|
|
5623
6321
|
(conv) => {
|
|
5624
6322
|
let agentIdToUse = conv.agentId || currentAgentId;
|
|
5625
6323
|
const targetAgent = getAgent(agentIdToUse);
|
|
@@ -5645,7 +6343,7 @@ var AIAgentPanel = import_react13.default.forwardRef(({
|
|
|
5645
6343
|
},
|
|
5646
6344
|
[currentAgentId, loadConversationTranscript, getAgent, agentList, conversationFirstPrompts]
|
|
5647
6345
|
);
|
|
5648
|
-
const handleHistoryChanged = (0,
|
|
6346
|
+
const handleHistoryChanged = (0, import_react14.useCallback)(
|
|
5649
6347
|
(history, conversationId) => {
|
|
5650
6348
|
const targetConversationId = conversationId || currentConversationIdRef.current;
|
|
5651
6349
|
if (targetConversationId) {
|
|
@@ -5697,7 +6395,7 @@ var AIAgentPanel = import_react13.default.forwardRef(({
|
|
|
5697
6395
|
agents
|
|
5698
6396
|
]
|
|
5699
6397
|
);
|
|
5700
|
-
const handleLoadingChange = (0,
|
|
6398
|
+
const handleLoadingChange = (0, import_react14.useCallback)((isLoading, conversationId) => {
|
|
5701
6399
|
const targetConversationId = conversationId || currentConversationIdRef.current;
|
|
5702
6400
|
if (targetConversationId) {
|
|
5703
6401
|
setActiveConversations((prev) => {
|
|
@@ -5713,7 +6411,7 @@ var AIAgentPanel = import_react13.default.forwardRef(({
|
|
|
5713
6411
|
});
|
|
5714
6412
|
}
|
|
5715
6413
|
}, []);
|
|
5716
|
-
const handleHandoffConfirm = (0,
|
|
6414
|
+
const handleHandoffConfirm = (0, import_react14.useCallback)(() => {
|
|
5717
6415
|
if (suggestedAgent) {
|
|
5718
6416
|
handleAgentSwitch(suggestedAgent);
|
|
5719
6417
|
}
|
|
@@ -5721,12 +6419,27 @@ var AIAgentPanel = import_react13.default.forwardRef(({
|
|
|
5721
6419
|
setSuggestedAgent(null);
|
|
5722
6420
|
setHandoffSource("agent");
|
|
5723
6421
|
}, [suggestedAgent, handleAgentSwitch]);
|
|
5724
|
-
const handleHandoffCancel = (0,
|
|
6422
|
+
const handleHandoffCancel = (0, import_react14.useCallback)(() => {
|
|
5725
6423
|
setShowHandoffDialog(false);
|
|
5726
6424
|
setSuggestedAgent(null);
|
|
5727
6425
|
setHandoffSource("agent");
|
|
5728
6426
|
}, []);
|
|
5729
|
-
const
|
|
6427
|
+
const handleContextSectionToggle = (0, import_react14.useCallback)((sectionId, enabled) => {
|
|
6428
|
+
if (!currentConversationId) return;
|
|
6429
|
+
setDisabledContextSections((prev) => {
|
|
6430
|
+
const next = new Map(prev);
|
|
6431
|
+
const conversationDisabled = next.get(currentConversationId) || /* @__PURE__ */ new Set();
|
|
6432
|
+
const nextDisabled = new Set(conversationDisabled);
|
|
6433
|
+
if (enabled) {
|
|
6434
|
+
nextDisabled.delete(sectionId);
|
|
6435
|
+
} else {
|
|
6436
|
+
nextDisabled.add(sectionId);
|
|
6437
|
+
}
|
|
6438
|
+
next.set(currentConversationId, nextDisabled);
|
|
6439
|
+
return next;
|
|
6440
|
+
});
|
|
6441
|
+
}, [currentConversationId]);
|
|
6442
|
+
const handleConversationCreated = (0, import_react14.useCallback)((tempId, realId) => {
|
|
5730
6443
|
console.log("Conversation created:", tempId, "->", realId);
|
|
5731
6444
|
setActiveConversations((prev) => {
|
|
5732
6445
|
const existing = prev.get(tempId);
|
|
@@ -5747,11 +6460,11 @@ var AIAgentPanel = import_react13.default.forwardRef(({
|
|
|
5747
6460
|
}
|
|
5748
6461
|
}
|
|
5749
6462
|
}, [onConversationChange]);
|
|
5750
|
-
const toggleCollapse = (0,
|
|
6463
|
+
const toggleCollapse = (0, import_react14.useCallback)(() => {
|
|
5751
6464
|
if (!collapsible) return;
|
|
5752
6465
|
setIsCollapsed((prev) => !prev);
|
|
5753
6466
|
}, [collapsible]);
|
|
5754
|
-
const toggleHistoryCollapse = (0,
|
|
6467
|
+
const toggleHistoryCollapse = (0, import_react14.useCallback)(() => {
|
|
5755
6468
|
setIsHistoryCollapsed((prev) => {
|
|
5756
6469
|
const next = !prev;
|
|
5757
6470
|
localStorage.setItem("ai-agent-panel-history-collapsed", String(next));
|
|
@@ -5767,7 +6480,7 @@ var AIAgentPanel = import_react13.default.forwardRef(({
|
|
|
5767
6480
|
!showConversationHistory ? "ai-agent-panel--no-history" : ""
|
|
5768
6481
|
].filter(Boolean).join(" ");
|
|
5769
6482
|
if (collapsible && isCollapsed) {
|
|
5770
|
-
return /* @__PURE__ */
|
|
6483
|
+
return /* @__PURE__ */ import_react14.default.createElement("div", { className: panelClasses, ref: panelRef }, /* @__PURE__ */ import_react14.default.createElement(
|
|
5771
6484
|
"div",
|
|
5772
6485
|
{
|
|
5773
6486
|
className: "ai-agent-panel__collapsed-bar",
|
|
@@ -5778,9 +6491,9 @@ var AIAgentPanel = import_react13.default.forwardRef(({
|
|
|
5778
6491
|
},
|
|
5779
6492
|
title: "Click to expand"
|
|
5780
6493
|
},
|
|
5781
|
-
/* @__PURE__ */
|
|
5782
|
-
/* @__PURE__ */
|
|
5783
|
-
showConversationHistory && /* @__PURE__ */
|
|
6494
|
+
/* @__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))),
|
|
6495
|
+
/* @__PURE__ */ import_react14.default.createElement("div", { className: "ai-agent-panel__collapsed-divider" }),
|
|
6496
|
+
showConversationHistory && /* @__PURE__ */ import_react14.default.createElement(Tooltip, { content: "Search", side: "left" }, /* @__PURE__ */ import_react14.default.createElement(
|
|
5784
6497
|
Button,
|
|
5785
6498
|
{
|
|
5786
6499
|
variant: "ghost",
|
|
@@ -5790,9 +6503,9 @@ var AIAgentPanel = import_react13.default.forwardRef(({
|
|
|
5790
6503
|
setShowSearch(true);
|
|
5791
6504
|
}
|
|
5792
6505
|
},
|
|
5793
|
-
/* @__PURE__ */
|
|
6506
|
+
/* @__PURE__ */ import_react14.default.createElement(SearchIcon2, null)
|
|
5794
6507
|
)),
|
|
5795
|
-
/* @__PURE__ */
|
|
6508
|
+
/* @__PURE__ */ import_react14.default.createElement(Tooltip, { content: "New Chat", side: "left" }, /* @__PURE__ */ import_react14.default.createElement(
|
|
5796
6509
|
Button,
|
|
5797
6510
|
{
|
|
5798
6511
|
variant: "ghost",
|
|
@@ -5802,15 +6515,15 @@ var AIAgentPanel = import_react13.default.forwardRef(({
|
|
|
5802
6515
|
handleNewConversation();
|
|
5803
6516
|
}
|
|
5804
6517
|
},
|
|
5805
|
-
/* @__PURE__ */
|
|
6518
|
+
/* @__PURE__ */ import_react14.default.createElement(PlusIcon, null)
|
|
5806
6519
|
)),
|
|
5807
|
-
/* @__PURE__ */
|
|
6520
|
+
/* @__PURE__ */ import_react14.default.createElement("div", { className: "ai-agent-panel__collapsed-divider" }),
|
|
5808
6521
|
agentList.map((agent) => {
|
|
5809
6522
|
const activeConvForAgent = activeConversationsList.find(
|
|
5810
6523
|
(conv) => conv.agentId === agent.id
|
|
5811
6524
|
);
|
|
5812
6525
|
const hasActiveConversation = !!activeConvForAgent;
|
|
5813
|
-
return /* @__PURE__ */
|
|
6526
|
+
return /* @__PURE__ */ import_react14.default.createElement(Tooltip, { key: agent.id, content: agent.name, side: "left" }, /* @__PURE__ */ import_react14.default.createElement(
|
|
5814
6527
|
Button,
|
|
5815
6528
|
{
|
|
5816
6529
|
variant: agent.id === currentAgentId ? "secondary" : "ghost",
|
|
@@ -5844,7 +6557,7 @@ var AIAgentPanel = import_react13.default.forwardRef(({
|
|
|
5844
6557
|
},
|
|
5845
6558
|
className: `ai-agent-panel__agent-icon ${hasActiveConversation ? "ai-agent-panel__agent-icon--active" : ""}`
|
|
5846
6559
|
},
|
|
5847
|
-
agent.avatarUrl ? /* @__PURE__ */
|
|
6560
|
+
agent.avatarUrl ? /* @__PURE__ */ import_react14.default.createElement(
|
|
5848
6561
|
"img",
|
|
5849
6562
|
{
|
|
5850
6563
|
src: agent.avatarUrl,
|
|
@@ -5852,20 +6565,20 @@ var AIAgentPanel = import_react13.default.forwardRef(({
|
|
|
5852
6565
|
className: "ai-agent-panel__agent-avatar"
|
|
5853
6566
|
}
|
|
5854
6567
|
) : agent.name.charAt(0).toUpperCase(),
|
|
5855
|
-
hasActiveConversation && /* @__PURE__ */
|
|
6568
|
+
hasActiveConversation && /* @__PURE__ */ import_react14.default.createElement("span", { className: "ai-agent-panel__agent-active-indicator" })
|
|
5856
6569
|
));
|
|
5857
6570
|
}),
|
|
5858
|
-
/* @__PURE__ */
|
|
6571
|
+
/* @__PURE__ */ import_react14.default.createElement("div", { className: "ai-agent-panel__collapsed-spacer" })
|
|
5859
6572
|
));
|
|
5860
6573
|
}
|
|
5861
|
-
return /* @__PURE__ */
|
|
6574
|
+
return /* @__PURE__ */ import_react14.default.createElement(
|
|
5862
6575
|
"div",
|
|
5863
6576
|
{
|
|
5864
6577
|
className: panelClasses,
|
|
5865
6578
|
ref: panelRef,
|
|
5866
6579
|
style: { width: `${panelWidth}px` }
|
|
5867
6580
|
},
|
|
5868
|
-
/* @__PURE__ */
|
|
6581
|
+
/* @__PURE__ */ import_react14.default.createElement(
|
|
5869
6582
|
"div",
|
|
5870
6583
|
{
|
|
5871
6584
|
ref: resizeRef,
|
|
@@ -5877,9 +6590,9 @@ var AIAgentPanel = import_react13.default.forwardRef(({
|
|
|
5877
6590
|
tabIndex: 0
|
|
5878
6591
|
}
|
|
5879
6592
|
),
|
|
5880
|
-
showConversationHistory && /* @__PURE__ */
|
|
6593
|
+
showConversationHistory && /* @__PURE__ */ import_react14.default.createElement("div", { className: `ai-agent-panel__sidebar ${isHistoryCollapsed ? "ai-agent-panel__sidebar--collapsed" : ""}` }, isHistoryCollapsed ? (
|
|
5881
6594
|
// Collapsed history bar
|
|
5882
|
-
/* @__PURE__ */
|
|
6595
|
+
/* @__PURE__ */ import_react14.default.createElement(
|
|
5883
6596
|
"div",
|
|
5884
6597
|
{
|
|
5885
6598
|
className: "ai-agent-panel__history-collapsed-bar",
|
|
@@ -5890,32 +6603,32 @@ var AIAgentPanel = import_react13.default.forwardRef(({
|
|
|
5890
6603
|
},
|
|
5891
6604
|
title: "Click to expand history"
|
|
5892
6605
|
},
|
|
5893
|
-
/* @__PURE__ */
|
|
6606
|
+
/* @__PURE__ */ import_react14.default.createElement(Tooltip, { content: "Expand History", side: sidebarPosition === "left" ? "right" : "left" }, /* @__PURE__ */ import_react14.default.createElement(
|
|
5894
6607
|
Button,
|
|
5895
6608
|
{
|
|
5896
6609
|
variant: "ghost",
|
|
5897
6610
|
size: "icon",
|
|
5898
6611
|
onClick: toggleHistoryCollapse
|
|
5899
6612
|
},
|
|
5900
|
-
/* @__PURE__ */
|
|
6613
|
+
/* @__PURE__ */ import_react14.default.createElement(ChevronRightIcon, null)
|
|
5901
6614
|
)),
|
|
5902
|
-
/* @__PURE__ */
|
|
5903
|
-
/* @__PURE__ */
|
|
6615
|
+
/* @__PURE__ */ import_react14.default.createElement("div", { className: "ai-agent-panel__collapsed-divider" }),
|
|
6616
|
+
/* @__PURE__ */ import_react14.default.createElement(Tooltip, { content: "New Chat", side: sidebarPosition === "left" ? "right" : "left" }, /* @__PURE__ */ import_react14.default.createElement(
|
|
5904
6617
|
Button,
|
|
5905
6618
|
{
|
|
5906
6619
|
variant: "ghost",
|
|
5907
6620
|
size: "icon",
|
|
5908
6621
|
onClick: handleNewConversation
|
|
5909
6622
|
},
|
|
5910
|
-
/* @__PURE__ */
|
|
6623
|
+
/* @__PURE__ */ import_react14.default.createElement(PlusIcon, null)
|
|
5911
6624
|
)),
|
|
5912
|
-
/* @__PURE__ */
|
|
6625
|
+
/* @__PURE__ */ import_react14.default.createElement("div", { className: "ai-agent-panel__collapsed-divider" }),
|
|
5913
6626
|
agentList.map((agent) => {
|
|
5914
6627
|
const activeConvForAgent = activeConversationsList.find(
|
|
5915
6628
|
(conv) => conv.agentId === agent.id
|
|
5916
6629
|
);
|
|
5917
6630
|
const hasActiveConversation = !!activeConvForAgent;
|
|
5918
|
-
return /* @__PURE__ */
|
|
6631
|
+
return /* @__PURE__ */ import_react14.default.createElement(Tooltip, { key: agent.id, content: agent.name, side: sidebarPosition === "left" ? "right" : "left" }, /* @__PURE__ */ import_react14.default.createElement(
|
|
5919
6632
|
Button,
|
|
5920
6633
|
{
|
|
5921
6634
|
variant: agent.id === currentAgentId ? "secondary" : "ghost",
|
|
@@ -5948,7 +6661,7 @@ var AIAgentPanel = import_react13.default.forwardRef(({
|
|
|
5948
6661
|
},
|
|
5949
6662
|
className: `ai-agent-panel__agent-icon ${hasActiveConversation ? "ai-agent-panel__agent-icon--active" : ""}`
|
|
5950
6663
|
},
|
|
5951
|
-
agent.avatarUrl ? /* @__PURE__ */
|
|
6664
|
+
agent.avatarUrl ? /* @__PURE__ */ import_react14.default.createElement(
|
|
5952
6665
|
"img",
|
|
5953
6666
|
{
|
|
5954
6667
|
src: agent.avatarUrl,
|
|
@@ -5956,40 +6669,40 @@ var AIAgentPanel = import_react13.default.forwardRef(({
|
|
|
5956
6669
|
className: "ai-agent-panel__agent-avatar"
|
|
5957
6670
|
}
|
|
5958
6671
|
) : agent.name.charAt(0).toUpperCase(),
|
|
5959
|
-
hasActiveConversation && /* @__PURE__ */
|
|
6672
|
+
hasActiveConversation && /* @__PURE__ */ import_react14.default.createElement("span", { className: "ai-agent-panel__agent-active-indicator" })
|
|
5960
6673
|
));
|
|
5961
6674
|
}),
|
|
5962
|
-
/* @__PURE__ */
|
|
6675
|
+
/* @__PURE__ */ import_react14.default.createElement("div", { className: "ai-agent-panel__history-collapsed-spacer" })
|
|
5963
6676
|
)
|
|
5964
|
-
) : /* @__PURE__ */
|
|
6677
|
+
) : /* @__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
6678
|
Input,
|
|
5966
6679
|
{
|
|
5967
6680
|
placeholder: "Search conversations...",
|
|
5968
6681
|
value: searchQuery,
|
|
5969
6682
|
onChange: (e) => setSearchQuery(e.target.value),
|
|
5970
|
-
icon: /* @__PURE__ */
|
|
6683
|
+
icon: /* @__PURE__ */ import_react14.default.createElement(SearchIcon2, null),
|
|
5971
6684
|
autoFocus: true,
|
|
5972
6685
|
onBlur: () => {
|
|
5973
6686
|
if (!searchQuery) setShowSearch(false);
|
|
5974
6687
|
}
|
|
5975
6688
|
}
|
|
5976
|
-
) : /* @__PURE__ */
|
|
6689
|
+
) : /* @__PURE__ */ import_react14.default.createElement(import_react14.default.Fragment, null, /* @__PURE__ */ import_react14.default.createElement(
|
|
5977
6690
|
Button,
|
|
5978
6691
|
{
|
|
5979
6692
|
variant: "ghost",
|
|
5980
6693
|
size: "icon",
|
|
5981
6694
|
onClick: () => setShowSearch(true)
|
|
5982
6695
|
},
|
|
5983
|
-
/* @__PURE__ */
|
|
5984
|
-
), /* @__PURE__ */
|
|
6696
|
+
/* @__PURE__ */ import_react14.default.createElement(SearchIcon2, null)
|
|
6697
|
+
), /* @__PURE__ */ import_react14.default.createElement(
|
|
5985
6698
|
Button,
|
|
5986
6699
|
{
|
|
5987
6700
|
variant: "ghost",
|
|
5988
6701
|
size: "icon",
|
|
5989
6702
|
onClick: handleNewConversation
|
|
5990
6703
|
},
|
|
5991
|
-
/* @__PURE__ */
|
|
5992
|
-
))), /* @__PURE__ */
|
|
6704
|
+
/* @__PURE__ */ import_react14.default.createElement(PlusIcon, null)
|
|
6705
|
+
))), /* @__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
6706
|
"div",
|
|
5994
6707
|
{
|
|
5995
6708
|
key: activeConv.stableKey,
|
|
@@ -6001,37 +6714,37 @@ var AIAgentPanel = import_react13.default.forwardRef(({
|
|
|
6001
6714
|
}
|
|
6002
6715
|
}
|
|
6003
6716
|
},
|
|
6004
|
-
/* @__PURE__ */
|
|
6005
|
-
/* @__PURE__ */
|
|
6717
|
+
/* @__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))),
|
|
6718
|
+
/* @__PURE__ */ import_react14.default.createElement(
|
|
6006
6719
|
"button",
|
|
6007
6720
|
{
|
|
6008
6721
|
className: "ai-agent-panel__conversation-close",
|
|
6009
6722
|
onClick: (e) => handleCloseConversation(activeConv.conversationId, e),
|
|
6010
6723
|
title: "Close conversation"
|
|
6011
6724
|
},
|
|
6012
|
-
/* @__PURE__ */
|
|
6725
|
+
/* @__PURE__ */ import_react14.default.createElement(CloseIcon2, null)
|
|
6013
6726
|
)
|
|
6014
|
-
))), conversationsLoading ? /* @__PURE__ */
|
|
6727
|
+
))), 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
6728
|
"div",
|
|
6016
6729
|
{
|
|
6017
6730
|
className: "ai-agent-panel__group-label ai-agent-panel__group-label--clickable",
|
|
6018
6731
|
onClick: () => toggleSection(group.label)
|
|
6019
6732
|
},
|
|
6020
|
-
/* @__PURE__ */
|
|
6021
|
-
/* @__PURE__ */
|
|
6733
|
+
/* @__PURE__ */ import_react14.default.createElement("span", null, group.label, " ", group.count > 0 && `(${group.count})`),
|
|
6734
|
+
/* @__PURE__ */ import_react14.default.createElement("span", { className: "ai-agent-panel__group-chevron" }, expandedSections[group.label] ? "\u25BC" : "\u25B6")
|
|
6022
6735
|
), expandedSections[group.label] && group.conversations.length > 0 && group.conversations.map((conv) => {
|
|
6023
6736
|
const isActive = activeConversations.has(conv.conversationId);
|
|
6024
|
-
return /* @__PURE__ */
|
|
6737
|
+
return /* @__PURE__ */ import_react14.default.createElement(
|
|
6025
6738
|
"div",
|
|
6026
6739
|
{
|
|
6027
6740
|
key: conv.conversationId,
|
|
6028
6741
|
className: `ai-agent-panel__conversation ${currentConversationId === conv.conversationId ? "ai-agent-panel__conversation--current" : ""} ${isActive ? "ai-agent-panel__conversation--in-active" : ""}`,
|
|
6029
6742
|
onClick: () => handleConversationSelect(conv)
|
|
6030
6743
|
},
|
|
6031
|
-
/* @__PURE__ */
|
|
6744
|
+
/* @__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
6745
|
);
|
|
6033
6746
|
}))))))),
|
|
6034
|
-
/* @__PURE__ */
|
|
6747
|
+
/* @__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
6748
|
ChatPanelWrapper,
|
|
6036
6749
|
{
|
|
6037
6750
|
key: `${activeConv.stableKey}-${activeConv.agentId}`,
|
|
@@ -6059,14 +6772,31 @@ var AIAgentPanel = import_react13.default.forwardRef(({
|
|
|
6059
6772
|
handleAgentSwitch,
|
|
6060
6773
|
agentsLoading,
|
|
6061
6774
|
contextSections: mergedContext.sections,
|
|
6062
|
-
totalContextTokens:
|
|
6775
|
+
totalContextTokens: filteredContext.totalTokens,
|
|
6063
6776
|
maxContextTokens,
|
|
6064
6777
|
enableContextDetailView,
|
|
6778
|
+
disabledSectionIds: currentDisabledSections,
|
|
6779
|
+
onToggleSection: handleContextSectionToggle,
|
|
6065
6780
|
onConversationCreated: handleConversationCreated,
|
|
6066
|
-
conversationInitialPrompt: activeConv.conversationInitialPrompt
|
|
6781
|
+
conversationInitialPrompt: activeConv.conversationInitialPrompt,
|
|
6782
|
+
cssUrl,
|
|
6783
|
+
markdownClass,
|
|
6784
|
+
width,
|
|
6785
|
+
height,
|
|
6786
|
+
scrollToEnd,
|
|
6787
|
+
prismStyle,
|
|
6788
|
+
showSaveButton,
|
|
6789
|
+
showEmailButton,
|
|
6790
|
+
messages,
|
|
6791
|
+
showCallToAction,
|
|
6792
|
+
callToActionButtonText,
|
|
6793
|
+
callToActionEmailAddress,
|
|
6794
|
+
callToActionEmailSubject,
|
|
6795
|
+
customerEmailCaptureMode,
|
|
6796
|
+
customerEmailCapturePlaceholder
|
|
6067
6797
|
}
|
|
6068
|
-
)), loadingConversationId && /* @__PURE__ */
|
|
6069
|
-
/* @__PURE__ */
|
|
6798
|
+
)), 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..."))),
|
|
6799
|
+
/* @__PURE__ */ import_react14.default.createElement(
|
|
6070
6800
|
Dialog,
|
|
6071
6801
|
{
|
|
6072
6802
|
isOpen: showHandoffDialog,
|
|
@@ -6074,7 +6804,7 @@ var AIAgentPanel = import_react13.default.forwardRef(({
|
|
|
6074
6804
|
title: "Switch Agent?",
|
|
6075
6805
|
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
6806
|
},
|
|
6077
|
-
/* @__PURE__ */
|
|
6807
|
+
/* @__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
6808
|
)
|
|
6079
6809
|
);
|
|
6080
6810
|
});
|
|
@@ -6082,7 +6812,7 @@ AIAgentPanel.displayName = "AIAgentPanel";
|
|
|
6082
6812
|
var AIAgentPanel_default = AIAgentPanel;
|
|
6083
6813
|
|
|
6084
6814
|
// src/hooks/useConversationStore.ts
|
|
6085
|
-
var
|
|
6815
|
+
var import_react15 = require("react");
|
|
6086
6816
|
var STORAGE_VERSION = "v1";
|
|
6087
6817
|
var generateId = () => {
|
|
6088
6818
|
if (typeof crypto !== "undefined" && "randomUUID" in crypto) {
|
|
@@ -6175,25 +6905,25 @@ function useConversationStore(options = {}) {
|
|
|
6175
6905
|
maxConversations = 50,
|
|
6176
6906
|
autoPersist = true
|
|
6177
6907
|
} = options;
|
|
6178
|
-
const [conversations, setConversations] = (0,
|
|
6908
|
+
const [conversations, setConversations] = (0, import_react15.useState)(
|
|
6179
6909
|
() => readFromStorage(namespace)
|
|
6180
6910
|
);
|
|
6181
|
-
const [activeConversationId, setActiveConversationId] = (0,
|
|
6182
|
-
const [searchQuery, setSearchQuery] = (0,
|
|
6183
|
-
(0,
|
|
6911
|
+
const [activeConversationId, setActiveConversationId] = (0, import_react15.useState)(null);
|
|
6912
|
+
const [searchQuery, setSearchQuery] = (0, import_react15.useState)("");
|
|
6913
|
+
(0, import_react15.useEffect)(() => {
|
|
6184
6914
|
if (autoPersist) {
|
|
6185
6915
|
writeToStorage(namespace, conversations);
|
|
6186
6916
|
}
|
|
6187
6917
|
}, [conversations, namespace, autoPersist]);
|
|
6188
|
-
(0,
|
|
6918
|
+
(0, import_react15.useEffect)(() => {
|
|
6189
6919
|
setConversations(readFromStorage(namespace));
|
|
6190
6920
|
setActiveConversationId(null);
|
|
6191
6921
|
}, [namespace]);
|
|
6192
|
-
const activeConversation = (0,
|
|
6922
|
+
const activeConversation = (0, import_react15.useMemo)(() => {
|
|
6193
6923
|
if (!activeConversationId) return null;
|
|
6194
6924
|
return conversations.find((c) => c.id === activeConversationId) || null;
|
|
6195
6925
|
}, [conversations, activeConversationId]);
|
|
6196
|
-
const filteredConversations = (0,
|
|
6926
|
+
const filteredConversations = (0, import_react15.useMemo)(() => {
|
|
6197
6927
|
if (!searchQuery.trim()) return conversations;
|
|
6198
6928
|
const query = searchQuery.toLowerCase().trim();
|
|
6199
6929
|
return conversations.filter((conv) => {
|
|
@@ -6201,13 +6931,13 @@ function useConversationStore(options = {}) {
|
|
|
6201
6931
|
return searchable.includes(query);
|
|
6202
6932
|
});
|
|
6203
6933
|
}, [conversations, searchQuery]);
|
|
6204
|
-
const groupedConversations = (0,
|
|
6934
|
+
const groupedConversations = (0, import_react15.useMemo)(() => {
|
|
6205
6935
|
const sorted = [...filteredConversations].sort(
|
|
6206
6936
|
(a, b) => new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime()
|
|
6207
6937
|
);
|
|
6208
6938
|
return groupByTimePeriod(sorted);
|
|
6209
6939
|
}, [filteredConversations]);
|
|
6210
|
-
const createConversation = (0,
|
|
6940
|
+
const createConversation = (0, import_react15.useCallback)(
|
|
6211
6941
|
(agentId, initialHistory) => {
|
|
6212
6942
|
const now = (/* @__PURE__ */ new Date()).toISOString();
|
|
6213
6943
|
const history = initialHistory || {};
|
|
@@ -6229,7 +6959,7 @@ function useConversationStore(options = {}) {
|
|
|
6229
6959
|
},
|
|
6230
6960
|
[maxConversations]
|
|
6231
6961
|
);
|
|
6232
|
-
const updateConversationHistory = (0,
|
|
6962
|
+
const updateConversationHistory = (0, import_react15.useCallback)(
|
|
6233
6963
|
(conversationId, history) => {
|
|
6234
6964
|
setConversations(
|
|
6235
6965
|
(prev) => prev.map((conv) => {
|
|
@@ -6245,26 +6975,26 @@ function useConversationStore(options = {}) {
|
|
|
6245
6975
|
},
|
|
6246
6976
|
[]
|
|
6247
6977
|
);
|
|
6248
|
-
const deleteConversation = (0,
|
|
6978
|
+
const deleteConversation = (0, import_react15.useCallback)((conversationId) => {
|
|
6249
6979
|
setConversations((prev) => prev.filter((c) => c.id !== conversationId));
|
|
6250
6980
|
if (activeConversationId === conversationId) {
|
|
6251
6981
|
setActiveConversationId(null);
|
|
6252
6982
|
}
|
|
6253
6983
|
}, [activeConversationId]);
|
|
6254
|
-
const selectConversation = (0,
|
|
6984
|
+
const selectConversation = (0, import_react15.useCallback)((conversationId) => {
|
|
6255
6985
|
setActiveConversationId(conversationId);
|
|
6256
6986
|
}, []);
|
|
6257
|
-
const getConversationsForAgent = (0,
|
|
6987
|
+
const getConversationsForAgent = (0, import_react15.useCallback)(
|
|
6258
6988
|
(agentId) => {
|
|
6259
6989
|
return conversations.filter((c) => c.agentId === agentId);
|
|
6260
6990
|
},
|
|
6261
6991
|
[conversations]
|
|
6262
6992
|
);
|
|
6263
|
-
const clearAllConversations = (0,
|
|
6993
|
+
const clearAllConversations = (0, import_react15.useCallback)(() => {
|
|
6264
6994
|
setConversations([]);
|
|
6265
6995
|
setActiveConversationId(null);
|
|
6266
6996
|
}, []);
|
|
6267
|
-
const startNewConversation = (0,
|
|
6997
|
+
const startNewConversation = (0, import_react15.useCallback)(() => {
|
|
6268
6998
|
setActiveConversationId(null);
|
|
6269
6999
|
}, []);
|
|
6270
7000
|
return {
|