@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.mjs
CHANGED
|
@@ -1865,16 +1865,16 @@ var ChatPanel = ({
|
|
|
1865
1865
|
return /* @__PURE__ */ React3.createElement("a", __spreadValues({ href, target: "_blank", rel: "noopener noreferrer" }, props), children);
|
|
1866
1866
|
};
|
|
1867
1867
|
const convertMarkdownToHTML = (markdown) => {
|
|
1868
|
+
const markdownContent = /* @__PURE__ */ React3.createElement(
|
|
1869
|
+
ReactMarkdown,
|
|
1870
|
+
{
|
|
1871
|
+
remarkPlugins: [remarkGfm],
|
|
1872
|
+
rehypePlugins: [rehypeRaw]
|
|
1873
|
+
},
|
|
1874
|
+
markdown
|
|
1875
|
+
);
|
|
1868
1876
|
const html = ReactDOMServer.renderToStaticMarkup(
|
|
1869
|
-
/* @__PURE__ */ React3.createElement(
|
|
1870
|
-
ReactMarkdown,
|
|
1871
|
-
{
|
|
1872
|
-
className: markdownClass,
|
|
1873
|
-
remarkPlugins: [remarkGfm],
|
|
1874
|
-
rehypePlugins: [rehypeRaw]
|
|
1875
|
-
},
|
|
1876
|
-
markdown
|
|
1877
|
-
)
|
|
1877
|
+
markdownClass ? /* @__PURE__ */ React3.createElement("div", { className: markdownClass }, markdownContent) : markdownContent
|
|
1878
1878
|
);
|
|
1879
1879
|
return html;
|
|
1880
1880
|
};
|
|
@@ -2103,10 +2103,16 @@ var ChatPanel = ({
|
|
|
2103
2103
|
},
|
|
2104
2104
|
/* @__PURE__ */ React3.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__ */ React3.createElement("line", { x1: "18", x2: "6", y1: "6", y2: "18" }), /* @__PURE__ */ React3.createElement("line", { x1: "6", x2: "18", y1: "6", y2: "18" }))
|
|
2105
2105
|
)),
|
|
2106
|
-
/* @__PURE__ */ React3.createElement("div", { className: "responseArea", ref: responseAreaRef }, initialMessage && initialMessage !== "" ? /* @__PURE__ */ React3.createElement("div", { className: "history-entry" }, /* @__PURE__ */ React3.createElement("div", { className: "response" }, /* @__PURE__ */ React3.createElement(
|
|
2106
|
+
/* @__PURE__ */ React3.createElement("div", { className: "responseArea", ref: responseAreaRef }, initialMessage && initialMessage !== "" ? /* @__PURE__ */ React3.createElement("div", { className: "history-entry" }, /* @__PURE__ */ React3.createElement("div", { className: "response" }, markdownClass ? /* @__PURE__ */ React3.createElement("div", { className: markdownClass }, /* @__PURE__ */ React3.createElement(
|
|
2107
|
+
ReactMarkdown,
|
|
2108
|
+
{
|
|
2109
|
+
remarkPlugins: [remarkGfm],
|
|
2110
|
+
rehypePlugins: [rehypeRaw]
|
|
2111
|
+
},
|
|
2112
|
+
initialMessage
|
|
2113
|
+
)) : /* @__PURE__ */ React3.createElement(
|
|
2107
2114
|
ReactMarkdown,
|
|
2108
2115
|
{
|
|
2109
|
-
className: markdownClass,
|
|
2110
2116
|
remarkPlugins: [remarkGfm],
|
|
2111
2117
|
rehypePlugins: [rehypeRaw]
|
|
2112
2118
|
},
|
|
@@ -2131,10 +2137,9 @@ var ChatPanel = ({
|
|
|
2131
2137
|
return null;
|
|
2132
2138
|
})(), (() => {
|
|
2133
2139
|
if (lastKey && history[lastKey] && history[lastKey].content) {
|
|
2134
|
-
|
|
2140
|
+
const content = /* @__PURE__ */ React3.createElement(
|
|
2135
2141
|
ReactMarkdown,
|
|
2136
2142
|
{
|
|
2137
|
-
className: markdownClass,
|
|
2138
2143
|
remarkPlugins: [remarkGfm],
|
|
2139
2144
|
rehypePlugins: [rehypeRaw],
|
|
2140
2145
|
components: {
|
|
@@ -2144,27 +2149,41 @@ var ChatPanel = ({
|
|
|
2144
2149
|
},
|
|
2145
2150
|
history[lastKey].content
|
|
2146
2151
|
);
|
|
2152
|
+
return markdownClass ? /* @__PURE__ */ React3.createElement("div", { className: markdownClass }, content) : content;
|
|
2147
2153
|
}
|
|
2148
2154
|
const { cleanedText } = processThinkingTags(
|
|
2149
2155
|
response || ""
|
|
2150
2156
|
);
|
|
2151
|
-
|
|
2152
|
-
|
|
2153
|
-
|
|
2154
|
-
|
|
2155
|
-
|
|
2156
|
-
|
|
2157
|
-
|
|
2158
|
-
|
|
2159
|
-
|
|
2160
|
-
|
|
2161
|
-
|
|
2162
|
-
|
|
2163
|
-
|
|
2164
|
-
|
|
2157
|
+
if (cleanedText && cleanedText.length > 0) {
|
|
2158
|
+
const content = /* @__PURE__ */ React3.createElement(
|
|
2159
|
+
ReactMarkdown,
|
|
2160
|
+
{
|
|
2161
|
+
remarkPlugins: [remarkGfm],
|
|
2162
|
+
rehypePlugins: [rehypeRaw],
|
|
2163
|
+
components: {
|
|
2164
|
+
/*a: CustomLink,*/
|
|
2165
|
+
code: CodeBlock
|
|
2166
|
+
}
|
|
2167
|
+
},
|
|
2168
|
+
cleanedText
|
|
2169
|
+
);
|
|
2170
|
+
return markdownClass ? /* @__PURE__ */ React3.createElement("div", { className: markdownClass }, content) : content;
|
|
2171
|
+
}
|
|
2172
|
+
return null;
|
|
2173
|
+
})()) : /* @__PURE__ */ React3.createElement("div", null, isLastEntry && thinkingBlocks.length > 0 && renderThinkingBlocks(), markdownClass ? /* @__PURE__ */ React3.createElement("div", { className: markdownClass }, /* @__PURE__ */ React3.createElement(
|
|
2174
|
+
ReactMarkdown,
|
|
2175
|
+
{
|
|
2176
|
+
remarkPlugins: [remarkGfm],
|
|
2177
|
+
rehypePlugins: [rehypeRaw],
|
|
2178
|
+
components: {
|
|
2179
|
+
/*a: CustomLink,*/
|
|
2180
|
+
code: CodeBlock
|
|
2181
|
+
}
|
|
2182
|
+
},
|
|
2183
|
+
processThinkingTags(historyEntry.content).cleanedText
|
|
2184
|
+
)) : /* @__PURE__ */ React3.createElement(
|
|
2165
2185
|
ReactMarkdown,
|
|
2166
2186
|
{
|
|
2167
|
-
className: markdownClass,
|
|
2168
2187
|
remarkPlugins: [remarkGfm],
|
|
2169
2188
|
rehypePlugins: [rehypeRaw],
|
|
2170
2189
|
components: {
|
|
@@ -2912,7 +2931,7 @@ var AgentPanel = ({
|
|
|
2912
2931
|
useEffect3(() => {
|
|
2913
2932
|
const fetchAgentData = () => __async(void 0, null, function* () {
|
|
2914
2933
|
try {
|
|
2915
|
-
const fetchUrl = `https://api.llmasaservice.io/agents/${agent}`;
|
|
2934
|
+
const fetchUrl = url.endsWith("dev") ? `https://8ftw8droff.execute-api.us-east-1.amazonaws.com/dev/agents/${agent}` : `https://api.llmasaservice.io/agents/${agent}`;
|
|
2916
2935
|
const response = yield fetch(fetchUrl, {
|
|
2917
2936
|
method: "GET",
|
|
2918
2937
|
headers: {
|
|
@@ -3020,16 +3039,17 @@ var AgentPanel = ({
|
|
|
3020
3039
|
var AgentPanel_default = AgentPanel;
|
|
3021
3040
|
|
|
3022
3041
|
// src/AIAgentPanel.tsx
|
|
3023
|
-
import
|
|
3042
|
+
import React13, { useCallback as useCallback4, useEffect as useEffect9, useMemo as useMemo4, useRef as useRef6, useState as useState8 } from "react";
|
|
3024
3043
|
|
|
3025
3044
|
// src/AIChatPanel.tsx
|
|
3026
|
-
import
|
|
3045
|
+
import React12, {
|
|
3027
3046
|
useCallback as useCallback2,
|
|
3028
3047
|
useEffect as useEffect7,
|
|
3029
3048
|
useMemo as useMemo2,
|
|
3030
3049
|
useRef as useRef5,
|
|
3031
3050
|
useState as useState6
|
|
3032
3051
|
} from "react";
|
|
3052
|
+
import ReactDOMServer2 from "react-dom/server";
|
|
3033
3053
|
import { useLLM as useLLM2 } from "llmasaservice-client";
|
|
3034
3054
|
import ReactMarkdown2 from "react-markdown";
|
|
3035
3055
|
import remarkGfm2 from "remark-gfm";
|
|
@@ -3371,19 +3391,69 @@ var DialogFooter = ({
|
|
|
3371
3391
|
return /* @__PURE__ */ React10.createElement("div", { className: `ai-dialog-footer ${className}` }, children);
|
|
3372
3392
|
};
|
|
3373
3393
|
|
|
3394
|
+
// src/components/ui/ToolInfoModal.tsx
|
|
3395
|
+
import React11 from "react";
|
|
3396
|
+
var ToolInfoModal2 = ({
|
|
3397
|
+
isOpen,
|
|
3398
|
+
onClose,
|
|
3399
|
+
data
|
|
3400
|
+
}) => {
|
|
3401
|
+
if (!isOpen || !data) return null;
|
|
3402
|
+
return /* @__PURE__ */ React11.createElement("div", { className: "ai-chat-modal-overlay", onClick: onClose }, /* @__PURE__ */ React11.createElement(
|
|
3403
|
+
"div",
|
|
3404
|
+
{
|
|
3405
|
+
className: "ai-chat-modal-content ai-chat-tool-info-modal",
|
|
3406
|
+
onClick: (e) => e.stopPropagation()
|
|
3407
|
+
},
|
|
3408
|
+
/* @__PURE__ */ React11.createElement("div", { className: "ai-chat-modal-header" }, /* @__PURE__ */ React11.createElement("h3", null, "Tool Information"), /* @__PURE__ */ React11.createElement(
|
|
3409
|
+
"button",
|
|
3410
|
+
{
|
|
3411
|
+
className: "ai-chat-modal-close",
|
|
3412
|
+
onClick: onClose,
|
|
3413
|
+
"aria-label": "Close"
|
|
3414
|
+
},
|
|
3415
|
+
"\xD7"
|
|
3416
|
+
)),
|
|
3417
|
+
/* @__PURE__ */ React11.createElement("div", { className: "ai-chat-modal-body ai-chat-tool-info-container" }, /* @__PURE__ */ React11.createElement("div", { className: "ai-chat-tool-info-section" }, /* @__PURE__ */ React11.createElement("h4", null, "Tool Calls"), /* @__PURE__ */ React11.createElement(
|
|
3418
|
+
"textarea",
|
|
3419
|
+
{
|
|
3420
|
+
className: "ai-chat-tool-info-json",
|
|
3421
|
+
readOnly: true,
|
|
3422
|
+
value: JSON.stringify(data.calls, null, 2)
|
|
3423
|
+
}
|
|
3424
|
+
)), /* @__PURE__ */ React11.createElement("div", { className: "ai-chat-tool-info-section" }, /* @__PURE__ */ React11.createElement("h4", null, "Tool Responses"), /* @__PURE__ */ React11.createElement(
|
|
3425
|
+
"textarea",
|
|
3426
|
+
{
|
|
3427
|
+
className: "ai-chat-tool-info-json",
|
|
3428
|
+
readOnly: true,
|
|
3429
|
+
value: JSON.stringify(data.responses, null, 2)
|
|
3430
|
+
}
|
|
3431
|
+
))),
|
|
3432
|
+
/* @__PURE__ */ React11.createElement("div", { className: "ai-chat-modal-footer" }, /* @__PURE__ */ React11.createElement(
|
|
3433
|
+
"button",
|
|
3434
|
+
{
|
|
3435
|
+
className: "ai-chat-modal-button ai-chat-modal-button--primary",
|
|
3436
|
+
onClick: onClose
|
|
3437
|
+
},
|
|
3438
|
+
"Close"
|
|
3439
|
+
))
|
|
3440
|
+
));
|
|
3441
|
+
};
|
|
3442
|
+
var ToolInfoModal_default2 = ToolInfoModal2;
|
|
3443
|
+
|
|
3374
3444
|
// src/AIChatPanel.tsx
|
|
3375
|
-
var ArrowUpIcon = () => /* @__PURE__ */
|
|
3376
|
-
var StopIcon = () => /* @__PURE__ */
|
|
3377
|
-
var ChevronDownIcon = () => /* @__PURE__ */
|
|
3378
|
-
var ChevronUpIcon = () => /* @__PURE__ */
|
|
3379
|
-
var AgentIcon = () => /* @__PURE__ */
|
|
3380
|
-
var CheckIcon = () => /* @__PURE__ */
|
|
3381
|
-
var BrainIcon = () => /* @__PURE__ */
|
|
3382
|
-
var SearchIcon = () => /* @__PURE__ */
|
|
3383
|
-
var LLMAsAServiceLogo = () => /* @__PURE__ */
|
|
3384
|
-
var AlertCircleIcon = () => /* @__PURE__ */
|
|
3385
|
-
var CloseIcon = () => /* @__PURE__ */
|
|
3386
|
-
var ChatInput =
|
|
3445
|
+
var ArrowUpIcon = () => /* @__PURE__ */ React12.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__ */ React12.createElement("path", { d: "M12 19V5M5 12l7-7 7 7" }));
|
|
3446
|
+
var StopIcon = () => /* @__PURE__ */ React12.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", className: "ai-chat-icon" }, /* @__PURE__ */ React12.createElement("rect", { x: "6", y: "6", width: "12", height: "12", rx: "2" }));
|
|
3447
|
+
var ChevronDownIcon = () => /* @__PURE__ */ React12.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__ */ React12.createElement("path", { d: "m6 9 6 6 6-6" }));
|
|
3448
|
+
var ChevronUpIcon = () => /* @__PURE__ */ React12.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__ */ React12.createElement("path", { d: "m18 15-6-6-6 6" }));
|
|
3449
|
+
var AgentIcon = () => /* @__PURE__ */ React12.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__ */ React12.createElement("path", { d: "M12 8V4H8" }), /* @__PURE__ */ React12.createElement("rect", { width: "16", height: "12", x: "4", y: "8", rx: "2" }), /* @__PURE__ */ React12.createElement("path", { d: "M2 14h2" }), /* @__PURE__ */ React12.createElement("path", { d: "M20 14h2" }), /* @__PURE__ */ React12.createElement("path", { d: "M15 13v2" }), /* @__PURE__ */ React12.createElement("path", { d: "M9 13v2" }));
|
|
3450
|
+
var CheckIcon = () => /* @__PURE__ */ React12.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__ */ React12.createElement("polyline", { points: "20 6 9 17 4 12" }));
|
|
3451
|
+
var BrainIcon = () => /* @__PURE__ */ React12.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__ */ React12.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__ */ React12.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" }));
|
|
3452
|
+
var SearchIcon = () => /* @__PURE__ */ React12.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__ */ React12.createElement("circle", { cx: "11", cy: "11", r: "8" }), /* @__PURE__ */ React12.createElement("path", { d: "m21 21-4.3-4.3" }));
|
|
3453
|
+
var LLMAsAServiceLogo = () => /* @__PURE__ */ React12.createElement("svg", { width: "16", height: "16", viewBox: "0 0 72 72", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React12.createElement("ellipse", { cx: "14.0868", cy: "59.2146", rx: "7.8261", ry: "7.7854", fill: "#2487D8" }), /* @__PURE__ */ React12.createElement("ellipse", { cx: "24.9013", cy: "43.0776", rx: "6.11858", ry: "6.08676", fill: "#2487D8" }), /* @__PURE__ */ React12.createElement("ellipse", { cx: "45.391", cy: "43.0776", rx: "6.11858", ry: "6.08676", fill: "#2487D8" }), /* @__PURE__ */ React12.createElement("ellipse", { cx: "65.8813", cy: "43.0776", rx: "6.11858", ry: "6.08676", fill: "#2487D8" }), /* @__PURE__ */ React12.createElement("ellipse", { cx: "35.1461", cy: "26.5327", rx: "4.41103", ry: "4.3878", fill: "#2487D8" }), /* @__PURE__ */ React12.createElement("ellipse", { cx: "55.6364", cy: "26.5327", rx: "4.41103", ry: "4.3878", fill: "#2487D8" }), /* @__PURE__ */ React12.createElement("ellipse", { cx: "45.391", cy: "10.3959", rx: "2.70351", ry: "2.68919", fill: "#2487D8" }));
|
|
3454
|
+
var AlertCircleIcon = () => /* @__PURE__ */ React12.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__ */ React12.createElement("circle", { cx: "12", cy: "12", r: "10" }), /* @__PURE__ */ React12.createElement("line", { x1: "12", x2: "12", y1: "8", y2: "12" }), /* @__PURE__ */ React12.createElement("line", { x1: "12", x2: "12.01", y1: "16", y2: "16" }));
|
|
3455
|
+
var CloseIcon = () => /* @__PURE__ */ React12.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__ */ React12.createElement("line", { x1: "18", x2: "6", y1: "6", y2: "18" }), /* @__PURE__ */ React12.createElement("line", { x1: "6", x2: "18", y1: "6", y2: "18" }));
|
|
3456
|
+
var ChatInput = React12.memo(({
|
|
3387
3457
|
placeholder,
|
|
3388
3458
|
idle,
|
|
3389
3459
|
onSubmit,
|
|
@@ -3397,12 +3467,15 @@ var ChatInput = React11.memo(({
|
|
|
3397
3467
|
contextSections = [],
|
|
3398
3468
|
totalContextTokens = 0,
|
|
3399
3469
|
maxContextTokens = 8e3,
|
|
3400
|
-
enableContextDetailView = false
|
|
3470
|
+
enableContextDetailView = false,
|
|
3471
|
+
disabledSectionIds = /* @__PURE__ */ new Set(),
|
|
3472
|
+
onToggleSection
|
|
3401
3473
|
}) => {
|
|
3402
3474
|
const [inputValue, setInputValue] = useState6("");
|
|
3403
3475
|
const [dropdownOpen, setDropdownOpen] = useState6(false);
|
|
3404
3476
|
const [contextViewerOpen, setContextViewerOpen] = useState6(false);
|
|
3405
3477
|
const [contextViewMode, setContextViewMode] = useState6("summary");
|
|
3478
|
+
const [expandedSectionId, setExpandedSectionId] = useState6(null);
|
|
3406
3479
|
const textareaRef = useRef5(null);
|
|
3407
3480
|
const containerRef = useRef5(null);
|
|
3408
3481
|
const contextPopoverRef = useRef5(null);
|
|
@@ -3439,6 +3512,7 @@ var ChatInput = React11.memo(({
|
|
|
3439
3512
|
if (contextPopoverRef.current && !contextPopoverRef.current.contains(event.target)) {
|
|
3440
3513
|
setContextViewerOpen(false);
|
|
3441
3514
|
setContextViewMode("summary");
|
|
3515
|
+
setExpandedSectionId(null);
|
|
3442
3516
|
}
|
|
3443
3517
|
};
|
|
3444
3518
|
if (contextViewerOpen) {
|
|
@@ -3466,13 +3540,13 @@ var ChatInput = React11.memo(({
|
|
|
3466
3540
|
if (typeof data === "string") return data;
|
|
3467
3541
|
return JSON.stringify(data, null, 2);
|
|
3468
3542
|
};
|
|
3469
|
-
return /* @__PURE__ */
|
|
3543
|
+
return /* @__PURE__ */ React12.createElement(
|
|
3470
3544
|
"div",
|
|
3471
3545
|
{
|
|
3472
3546
|
className: `ai-chat-panel__input-container ${dropdownOpen ? "ai-chat-panel__input-container--dropdown-open" : ""}`,
|
|
3473
3547
|
ref: containerRef
|
|
3474
3548
|
},
|
|
3475
|
-
/* @__PURE__ */
|
|
3549
|
+
/* @__PURE__ */ React12.createElement("div", { className: "ai-chat-panel__input" }, /* @__PURE__ */ React12.createElement(
|
|
3476
3550
|
"textarea",
|
|
3477
3551
|
{
|
|
3478
3552
|
ref: textareaRef,
|
|
@@ -3492,24 +3566,24 @@ var ChatInput = React11.memo(({
|
|
|
3492
3566
|
rows: 1
|
|
3493
3567
|
}
|
|
3494
3568
|
)),
|
|
3495
|
-
/* @__PURE__ */
|
|
3569
|
+
/* @__PURE__ */ React12.createElement("div", { className: "ai-chat-panel__input-footer" }, agentOptions.length > 0 ? /* @__PURE__ */ React12.createElement("div", { className: "ai-chat-agent-selector" }, /* @__PURE__ */ React12.createElement(
|
|
3496
3570
|
"button",
|
|
3497
3571
|
{
|
|
3498
3572
|
className: "ai-chat-agent-selector__trigger",
|
|
3499
3573
|
onClick: () => setDropdownOpen(!dropdownOpen),
|
|
3500
3574
|
disabled: agentsLoading
|
|
3501
3575
|
},
|
|
3502
|
-
currentAgentAvatarUrl ? /* @__PURE__ */
|
|
3576
|
+
currentAgentAvatarUrl ? /* @__PURE__ */ React12.createElement(
|
|
3503
3577
|
"img",
|
|
3504
3578
|
{
|
|
3505
3579
|
src: currentAgentAvatarUrl,
|
|
3506
3580
|
alt: currentAgentLabel || "Agent",
|
|
3507
3581
|
className: "ai-chat-agent-selector__avatar"
|
|
3508
3582
|
}
|
|
3509
|
-
) : /* @__PURE__ */
|
|
3510
|
-
/* @__PURE__ */
|
|
3511
|
-
dropdownOpen ? /* @__PURE__ */
|
|
3512
|
-
)) : /* @__PURE__ */
|
|
3583
|
+
) : /* @__PURE__ */ React12.createElement(AgentIcon, null),
|
|
3584
|
+
/* @__PURE__ */ React12.createElement("span", { className: "ai-chat-agent-selector__label" }, agentsLoading ? "Loading..." : currentAgentLabel || "Select agent"),
|
|
3585
|
+
dropdownOpen ? /* @__PURE__ */ React12.createElement(ChevronUpIcon, null) : /* @__PURE__ */ React12.createElement(ChevronDownIcon, null)
|
|
3586
|
+
)) : /* @__PURE__ */ React12.createElement("div", { className: "ai-chat-panel__input-footer-spacer" }), contextSections.length > 0 && /* @__PURE__ */ React12.createElement("div", { className: "ai-chat-context-pill-wrapper" }, /* @__PURE__ */ React12.createElement(
|
|
3513
3587
|
"button",
|
|
3514
3588
|
{
|
|
3515
3589
|
className: `ai-chat-context-pill ${contextViewerOpen ? "ai-chat-context-pill--active" : ""} ${isOverLimit ? "ai-chat-context-pill--warning" : ""}`,
|
|
@@ -3520,92 +3594,140 @@ var ChatInput = React11.memo(({
|
|
|
3520
3594
|
setContextViewerOpen(!contextViewerOpen);
|
|
3521
3595
|
if (!contextViewerOpen) {
|
|
3522
3596
|
setContextViewMode("summary");
|
|
3597
|
+
setExpandedSectionId(null);
|
|
3598
|
+
} else {
|
|
3599
|
+
setExpandedSectionId(null);
|
|
3523
3600
|
}
|
|
3524
3601
|
},
|
|
3525
3602
|
type: "button",
|
|
3526
3603
|
title: "View context"
|
|
3527
3604
|
},
|
|
3528
|
-
/* @__PURE__ */
|
|
3529
|
-
), contextViewerOpen && /* @__PURE__ */
|
|
3605
|
+
/* @__PURE__ */ React12.createElement("span", { className: "ai-chat-context-pill__label" }, "context: ", contextSections.length, " ", contextSections.length === 1 ? "section" : "sections")
|
|
3606
|
+
), contextViewerOpen && /* @__PURE__ */ React12.createElement(
|
|
3530
3607
|
"div",
|
|
3531
3608
|
{
|
|
3532
3609
|
className: `ai-chat-context-popover ${contextViewMode === "detail" ? "ai-chat-context-popover--detail" : ""}`,
|
|
3533
3610
|
ref: contextPopoverRef,
|
|
3534
3611
|
onClick: (e) => e.stopPropagation()
|
|
3535
3612
|
},
|
|
3536
|
-
contextViewMode === "summary" && /* @__PURE__ */
|
|
3613
|
+
contextViewMode === "summary" && /* @__PURE__ */ React12.createElement("div", { className: "ai-chat-context-popover__summary" }, /* @__PURE__ */ React12.createElement("div", { className: "ai-chat-context-popover__header" }, /* @__PURE__ */ React12.createElement("span", { className: "ai-chat-context-popover__title" }, "Context"), /* @__PURE__ */ React12.createElement(
|
|
3537
3614
|
"button",
|
|
3538
3615
|
{
|
|
3539
3616
|
className: "ai-chat-context-popover__close",
|
|
3540
|
-
onClick: () =>
|
|
3617
|
+
onClick: () => {
|
|
3618
|
+
setContextViewerOpen(false);
|
|
3619
|
+
setExpandedSectionId(null);
|
|
3620
|
+
},
|
|
3541
3621
|
type: "button"
|
|
3542
3622
|
},
|
|
3543
3623
|
"\xD7"
|
|
3544
|
-
)), /* @__PURE__ */
|
|
3624
|
+
)), /* @__PURE__ */ React12.createElement("div", { className: "ai-chat-context-popover__token-bar" }, /* @__PURE__ */ React12.createElement("div", { className: "ai-chat-context-popover__token-info" }, /* @__PURE__ */ React12.createElement("span", { className: isOverLimit ? "ai-chat-context-popover__tokens--warning" : "" }, formatTokens(totalContextTokens), " tokens"), /* @__PURE__ */ React12.createElement("span", { className: "ai-chat-context-popover__token-limit" }, "/ ", formatTokens(maxContextTokens), " limit")), /* @__PURE__ */ React12.createElement("div", { className: "ai-chat-context-popover__progress" }, /* @__PURE__ */ React12.createElement(
|
|
3545
3625
|
"div",
|
|
3546
3626
|
{
|
|
3547
3627
|
className: `ai-chat-context-popover__progress-bar ${isOverLimit ? "ai-chat-context-popover__progress-bar--warning" : ""}`,
|
|
3548
3628
|
style: { width: `${Math.min(tokenPercentage, 100)}%` }
|
|
3549
3629
|
}
|
|
3550
|
-
))), /* @__PURE__ */
|
|
3630
|
+
))), /* @__PURE__ */ React12.createElement("div", { className: "ai-chat-context-popover__sections" }, contextSections.map((section) => /* @__PURE__ */ React12.createElement(
|
|
3551
3631
|
"div",
|
|
3552
3632
|
{
|
|
3553
3633
|
key: section.id,
|
|
3554
3634
|
className: `ai-chat-context-popover__section-item ${enableContextDetailView ? "ai-chat-context-popover__section-item--clickable" : ""}`,
|
|
3555
3635
|
onClick: () => {
|
|
3556
3636
|
if (enableContextDetailView) {
|
|
3637
|
+
setExpandedSectionId(section.id);
|
|
3557
3638
|
setContextViewMode("detail");
|
|
3558
3639
|
}
|
|
3559
3640
|
}
|
|
3560
3641
|
},
|
|
3561
|
-
/* @__PURE__ */
|
|
3562
|
-
/* @__PURE__ */
|
|
3563
|
-
/* @__PURE__ */
|
|
3564
|
-
))), enableContextDetailView && /* @__PURE__ */
|
|
3642
|
+
/* @__PURE__ */ React12.createElement("span", { className: "ai-chat-context-popover__section-icon" }, "\u{1F4C4}"),
|
|
3643
|
+
/* @__PURE__ */ React12.createElement("span", { className: "ai-chat-context-popover__section-title" }, section.title),
|
|
3644
|
+
/* @__PURE__ */ React12.createElement("span", { className: "ai-chat-context-popover__section-tokens" }, section.tokens || Math.ceil(JSON.stringify(section.data).length / 4))
|
|
3645
|
+
))), enableContextDetailView && /* @__PURE__ */ React12.createElement(
|
|
3565
3646
|
"button",
|
|
3566
3647
|
{
|
|
3567
3648
|
className: "ai-chat-context-popover__expand-btn",
|
|
3568
|
-
onClick: () =>
|
|
3649
|
+
onClick: () => {
|
|
3650
|
+
setExpandedSectionId(null);
|
|
3651
|
+
setContextViewMode("detail");
|
|
3652
|
+
},
|
|
3569
3653
|
type: "button"
|
|
3570
3654
|
},
|
|
3571
3655
|
"View details \u2192"
|
|
3572
3656
|
)),
|
|
3573
|
-
contextViewMode === "detail" && enableContextDetailView && /* @__PURE__ */
|
|
3657
|
+
contextViewMode === "detail" && enableContextDetailView && /* @__PURE__ */ React12.createElement("div", { className: "ai-chat-context-popover__detail" }, /* @__PURE__ */ React12.createElement("div", { className: "ai-chat-context-popover__header" }, /* @__PURE__ */ React12.createElement(
|
|
3574
3658
|
"button",
|
|
3575
3659
|
{
|
|
3576
3660
|
className: "ai-chat-context-popover__back",
|
|
3577
|
-
onClick: () =>
|
|
3661
|
+
onClick: () => {
|
|
3662
|
+
setContextViewMode("summary");
|
|
3663
|
+
setExpandedSectionId(null);
|
|
3664
|
+
},
|
|
3578
3665
|
type: "button"
|
|
3579
3666
|
},
|
|
3580
3667
|
"\u2190 Back"
|
|
3581
|
-
), /* @__PURE__ */
|
|
3668
|
+
), /* @__PURE__ */ React12.createElement("span", { className: "ai-chat-context-popover__title" }, "Context Details"), /* @__PURE__ */ React12.createElement(
|
|
3582
3669
|
"button",
|
|
3583
3670
|
{
|
|
3584
3671
|
className: "ai-chat-context-popover__close",
|
|
3585
|
-
onClick: () =>
|
|
3672
|
+
onClick: () => {
|
|
3673
|
+
setContextViewerOpen(false);
|
|
3674
|
+
setExpandedSectionId(null);
|
|
3675
|
+
},
|
|
3586
3676
|
type: "button"
|
|
3587
3677
|
},
|
|
3588
3678
|
"\xD7"
|
|
3589
|
-
)), /* @__PURE__ */
|
|
3679
|
+
)), /* @__PURE__ */ React12.createElement("div", { className: "ai-chat-context-popover__token-bar" }, /* @__PURE__ */ React12.createElement("div", { className: "ai-chat-context-popover__token-info" }, /* @__PURE__ */ React12.createElement("span", { className: isOverLimit ? "ai-chat-context-popover__tokens--warning" : "" }, formatTokens(totalContextTokens), " tokens"), /* @__PURE__ */ React12.createElement("span", { className: "ai-chat-context-popover__token-limit" }, "/ ", formatTokens(maxContextTokens), " limit")), /* @__PURE__ */ React12.createElement("div", { className: "ai-chat-context-popover__progress" }, /* @__PURE__ */ React12.createElement(
|
|
3590
3680
|
"div",
|
|
3591
3681
|
{
|
|
3592
3682
|
className: `ai-chat-context-popover__progress-bar ${isOverLimit ? "ai-chat-context-popover__progress-bar--warning" : ""}`,
|
|
3593
3683
|
style: { width: `${Math.min(tokenPercentage, 100)}%` }
|
|
3594
3684
|
}
|
|
3595
|
-
))), /* @__PURE__ */
|
|
3685
|
+
))), /* @__PURE__ */ React12.createElement("div", { className: "ai-chat-context-popover__detail-sections" }, contextSections.map((section) => {
|
|
3596
3686
|
const format = detectFormat(section.data);
|
|
3597
|
-
|
|
3687
|
+
const isEnabled = !disabledSectionIds.has(section.id);
|
|
3688
|
+
return /* @__PURE__ */ React12.createElement(
|
|
3689
|
+
"details",
|
|
3690
|
+
{
|
|
3691
|
+
key: section.id,
|
|
3692
|
+
className: `ai-chat-context-popover__detail-section ${!isEnabled ? "ai-chat-context-popover__detail-section--disabled" : ""}`,
|
|
3693
|
+
open: expandedSectionId === section.id
|
|
3694
|
+
},
|
|
3695
|
+
/* @__PURE__ */ React12.createElement("summary", { className: "ai-chat-context-popover__detail-section-header" }, /* @__PURE__ */ React12.createElement("div", { className: "ai-chat-context-popover__detail-section-title-row" }, /* @__PURE__ */ React12.createElement("span", { className: "ai-chat-context-popover__detail-section-title" }, section.title), /* @__PURE__ */ React12.createElement(
|
|
3696
|
+
"label",
|
|
3697
|
+
{
|
|
3698
|
+
className: "ai-chat-context-toggle",
|
|
3699
|
+
onClick: (e) => e.stopPropagation(),
|
|
3700
|
+
title: isEnabled ? "Disable this context section" : "Enable this context section"
|
|
3701
|
+
},
|
|
3702
|
+
/* @__PURE__ */ React12.createElement(
|
|
3703
|
+
"input",
|
|
3704
|
+
{
|
|
3705
|
+
type: "checkbox",
|
|
3706
|
+
checked: isEnabled,
|
|
3707
|
+
onChange: (e) => {
|
|
3708
|
+
e.stopPropagation();
|
|
3709
|
+
if (onToggleSection) {
|
|
3710
|
+
onToggleSection(section.id, !isEnabled);
|
|
3711
|
+
}
|
|
3712
|
+
},
|
|
3713
|
+
className: "ai-chat-context-toggle__input"
|
|
3714
|
+
}
|
|
3715
|
+
),
|
|
3716
|
+
/* @__PURE__ */ React12.createElement("span", { className: "ai-chat-context-toggle__slider" })
|
|
3717
|
+
)), /* @__PURE__ */ React12.createElement("span", { className: "ai-chat-context-popover__detail-section-meta" }, /* @__PURE__ */ React12.createElement("code", null, `{{${section.id}}}`), /* @__PURE__ */ React12.createElement("span", null, "~", section.tokens || Math.ceil(JSON.stringify(section.data).length / 4)))),
|
|
3718
|
+
/* @__PURE__ */ React12.createElement("pre", { className: "ai-chat-context-popover__detail-content" }, /* @__PURE__ */ React12.createElement("code", null, formatContent(section.data, format)))
|
|
3719
|
+
);
|
|
3598
3720
|
})))
|
|
3599
|
-
)), /* @__PURE__ */
|
|
3721
|
+
)), /* @__PURE__ */ React12.createElement(
|
|
3600
3722
|
"button",
|
|
3601
3723
|
{
|
|
3602
3724
|
className: `ai-chat-send-button ${idle && !inputValue.trim() ? "ai-chat-send-button--disabled" : ""} ${!idle ? "ai-chat-send-button--stop" : ""}`,
|
|
3603
3725
|
onClick: () => idle ? handleSubmit() : onStop(),
|
|
3604
3726
|
disabled: idle && !inputValue.trim()
|
|
3605
3727
|
},
|
|
3606
|
-
idle ? /* @__PURE__ */
|
|
3728
|
+
idle ? /* @__PURE__ */ React12.createElement(ArrowUpIcon, null) : /* @__PURE__ */ React12.createElement(StopIcon, null)
|
|
3607
3729
|
)),
|
|
3608
|
-
agentOptions.length > 0 && dropdownOpen && /* @__PURE__ */
|
|
3730
|
+
agentOptions.length > 0 && dropdownOpen && /* @__PURE__ */ React12.createElement("div", { className: "ai-chat-agent-selector__dropdown-inside" }, agentOptions.map((option) => /* @__PURE__ */ React12.createElement(
|
|
3609
3731
|
"button",
|
|
3610
3732
|
{
|
|
3611
3733
|
key: option.value,
|
|
@@ -3617,16 +3739,16 @@ var ChatInput = React11.memo(({
|
|
|
3617
3739
|
setDropdownOpen(false);
|
|
3618
3740
|
}
|
|
3619
3741
|
},
|
|
3620
|
-
option.avatarUrl ? /* @__PURE__ */
|
|
3742
|
+
option.avatarUrl ? /* @__PURE__ */ React12.createElement(
|
|
3621
3743
|
"img",
|
|
3622
3744
|
{
|
|
3623
3745
|
src: option.avatarUrl,
|
|
3624
3746
|
alt: option.label,
|
|
3625
3747
|
className: "ai-chat-agent-selector__option-avatar"
|
|
3626
3748
|
}
|
|
3627
|
-
) : option.icon ? /* @__PURE__ */
|
|
3628
|
-
/* @__PURE__ */
|
|
3629
|
-
option.value === currentAgentId && /* @__PURE__ */
|
|
3749
|
+
) : option.icon ? /* @__PURE__ */ React12.createElement("span", { className: "ai-chat-agent-selector__option-icon" }, option.icon) : null,
|
|
3750
|
+
/* @__PURE__ */ React12.createElement("span", { className: "ai-chat-agent-selector__option-content" }, /* @__PURE__ */ React12.createElement("span", { className: "ai-chat-agent-selector__option-label" }, option.label), option.description && /* @__PURE__ */ React12.createElement("span", { className: "ai-chat-agent-selector__option-description" }, option.description)),
|
|
3751
|
+
option.value === currentAgentId && /* @__PURE__ */ React12.createElement("span", { className: "ai-chat-agent-selector__option-check" }, /* @__PURE__ */ React12.createElement(CheckIcon, null))
|
|
3630
3752
|
)))
|
|
3631
3753
|
);
|
|
3632
3754
|
});
|
|
@@ -3670,8 +3792,30 @@ var AIChatPanel = ({
|
|
|
3670
3792
|
totalContextTokens = 0,
|
|
3671
3793
|
maxContextTokens = 8e3,
|
|
3672
3794
|
enableContextDetailView = false,
|
|
3673
|
-
|
|
3795
|
+
disabledSectionIds: propDisabledSectionIds,
|
|
3796
|
+
onToggleSection: propOnToggleSection,
|
|
3797
|
+
onConversationCreated,
|
|
3798
|
+
// UI Customization Props
|
|
3799
|
+
cssUrl,
|
|
3800
|
+
markdownClass,
|
|
3801
|
+
width,
|
|
3802
|
+
height,
|
|
3803
|
+
scrollToEnd = false,
|
|
3804
|
+
prismStyle,
|
|
3805
|
+
// Email & Save Props
|
|
3806
|
+
showSaveButton = true,
|
|
3807
|
+
showEmailButton = true,
|
|
3808
|
+
messages = [],
|
|
3809
|
+
// Call-to-Action Props
|
|
3810
|
+
showCallToAction = false,
|
|
3811
|
+
callToActionButtonText = "Submit",
|
|
3812
|
+
callToActionEmailAddress = "",
|
|
3813
|
+
callToActionEmailSubject = "Agent CTA submitted",
|
|
3814
|
+
// Customer Email Capture Props
|
|
3815
|
+
customerEmailCaptureMode = "HIDE",
|
|
3816
|
+
customerEmailCapturePlaceholder = "Please enter your email..."
|
|
3674
3817
|
}) => {
|
|
3818
|
+
var _a;
|
|
3675
3819
|
const publicAPIUrl = "https://api.llmasaservice.io";
|
|
3676
3820
|
const [lastController, setLastController] = useState6(new AbortController());
|
|
3677
3821
|
const [lastMessages, setLastMessages] = useState6([]);
|
|
@@ -3688,6 +3832,29 @@ var AIChatPanel = ({
|
|
|
3688
3832
|
const [copiedCallId, setCopiedCallId] = useState6(null);
|
|
3689
3833
|
const [feedbackCallId, setFeedbackCallId] = useState6(null);
|
|
3690
3834
|
const [error, setError] = useState6(null);
|
|
3835
|
+
const [emailSent, setEmailSent] = useState6(false);
|
|
3836
|
+
const [isToolInfoModalOpen, setIsToolInfoModalOpen] = useState6(false);
|
|
3837
|
+
const [toolInfoData, setToolInfoData] = useState6(null);
|
|
3838
|
+
const [callToActionSent, setCallToActionSent] = useState6(false);
|
|
3839
|
+
const [CTAClickedButNoEmail, setCTAClickedButNoEmail] = useState6(false);
|
|
3840
|
+
const [emailInput, setEmailInput] = useState6((_a = customer == null ? void 0 : customer.customer_user_email) != null ? _a : "");
|
|
3841
|
+
const [emailInputSet, setEmailInputSet] = useState6(false);
|
|
3842
|
+
const [emailValid, setEmailValid] = useState6(true);
|
|
3843
|
+
const [showEmailPanel, setShowEmailPanel] = useState6(customerEmailCaptureMode !== "HIDE");
|
|
3844
|
+
const [emailClickedButNoEmail, setEmailClickedButNoEmail] = useState6(false);
|
|
3845
|
+
const [pendingToolRequests, setPendingToolRequests] = useState6([]);
|
|
3846
|
+
const [sessionApprovedTools, setSessionApprovedTools] = useState6([]);
|
|
3847
|
+
const [alwaysApprovedTools, setAlwaysApprovedTools] = useState6([]);
|
|
3848
|
+
const [internalDisabledSectionIds, setInternalDisabledSectionIds] = useState6(/* @__PURE__ */ new Set());
|
|
3849
|
+
const disabledSectionIds = propDisabledSectionIds != null ? propDisabledSectionIds : internalDisabledSectionIds;
|
|
3850
|
+
useEffect7(() => {
|
|
3851
|
+
setShowEmailPanel(customerEmailCaptureMode !== "HIDE");
|
|
3852
|
+
if (customerEmailCaptureMode === "REQUIRED") {
|
|
3853
|
+
if (!isEmailAddress(emailInput)) {
|
|
3854
|
+
setEmailValid(false);
|
|
3855
|
+
}
|
|
3856
|
+
}
|
|
3857
|
+
}, [customerEmailCaptureMode, emailInput]);
|
|
3691
3858
|
const bottomRef = useRef5(null);
|
|
3692
3859
|
const responseAreaRef = useRef5(null);
|
|
3693
3860
|
const [userHasScrolled, setUserHasScrolled] = useState6(false);
|
|
@@ -3698,6 +3865,7 @@ var AIChatPanel = ({
|
|
|
3698
3865
|
const hasNotifiedCompletionRef = useRef5(true);
|
|
3699
3866
|
const latestHistoryRef = useRef5(initialHistory);
|
|
3700
3867
|
const initialPromptSentRef = useRef5(false);
|
|
3868
|
+
const lastFollowOnPromptRef = useRef5("");
|
|
3701
3869
|
useEffect7(() => {
|
|
3702
3870
|
if (!initialHistory) return;
|
|
3703
3871
|
setHistory((prev) => {
|
|
@@ -3744,9 +3912,9 @@ var AIChatPanel = ({
|
|
|
3744
3912
|
lastKeyRef.current = lastKey;
|
|
3745
3913
|
lastCallIdRef.current = lastCallId;
|
|
3746
3914
|
lastPromptRef.current = lastPrompt;
|
|
3747
|
-
const
|
|
3748
|
-
() => theme === "light" ? materialLight3 : materialDark3,
|
|
3749
|
-
[theme]
|
|
3915
|
+
const effectivePrismStyle = useMemo2(
|
|
3916
|
+
() => prismStyle != null ? prismStyle : theme === "light" ? materialLight3 : materialDark3,
|
|
3917
|
+
[prismStyle, theme]
|
|
3750
3918
|
);
|
|
3751
3919
|
const browserInfo = useMemo2(() => {
|
|
3752
3920
|
if (typeof window === "undefined") return null;
|
|
@@ -3756,8 +3924,23 @@ var AIChatPanel = ({
|
|
|
3756
3924
|
userLanguage: navigator.language
|
|
3757
3925
|
};
|
|
3758
3926
|
}, []);
|
|
3927
|
+
const handleToggleSection = useCallback2((sectionId, enabled) => {
|
|
3928
|
+
if (propOnToggleSection) {
|
|
3929
|
+
propOnToggleSection(sectionId, enabled);
|
|
3930
|
+
} else {
|
|
3931
|
+
setInternalDisabledSectionIds((prev) => {
|
|
3932
|
+
const next = new Set(prev);
|
|
3933
|
+
if (enabled) {
|
|
3934
|
+
next.delete(sectionId);
|
|
3935
|
+
} else {
|
|
3936
|
+
next.add(sectionId);
|
|
3937
|
+
}
|
|
3938
|
+
return next;
|
|
3939
|
+
});
|
|
3940
|
+
}
|
|
3941
|
+
}, [propOnToggleSection]);
|
|
3759
3942
|
const ensureConversation = useCallback2(() => {
|
|
3760
|
-
var
|
|
3943
|
+
var _a2, _b;
|
|
3761
3944
|
console.log("ensureConversation - called with:", {
|
|
3762
3945
|
currentConversation,
|
|
3763
3946
|
createConversationOnFirstChat,
|
|
@@ -3772,7 +3955,7 @@ var AIChatPanel = ({
|
|
|
3772
3955
|
const requestBody = {
|
|
3773
3956
|
project_id,
|
|
3774
3957
|
agentId: agent,
|
|
3775
|
-
customerId: (
|
|
3958
|
+
customerId: (_a2 = customer == null ? void 0 : customer.customer_id) != null ? _a2 : null,
|
|
3776
3959
|
customerEmail: (_b = customer == null ? void 0 : customer.customer_user_email) != null ? _b : null,
|
|
3777
3960
|
timezone: browserInfo == null ? void 0 : browserInfo.userTimezone,
|
|
3778
3961
|
language: browserInfo == null ? void 0 : browserInfo.userLanguage
|
|
@@ -3811,10 +3994,10 @@ var AIChatPanel = ({
|
|
|
3811
3994
|
return Promise.resolve(currentConversation);
|
|
3812
3995
|
}, [currentConversation, createConversationOnFirstChat, publicAPIUrl, project_id, agent, customer, browserInfo]);
|
|
3813
3996
|
const dataWithExtras = useCallback2(() => {
|
|
3814
|
-
var
|
|
3997
|
+
var _a2, _b, _c, _d, _e, _f, _g, _h;
|
|
3815
3998
|
return [
|
|
3816
3999
|
...data,
|
|
3817
|
-
{ key: "--customer_id", data: (
|
|
4000
|
+
{ key: "--customer_id", data: (_a2 = customer == null ? void 0 : customer.customer_id) != null ? _a2 : "" },
|
|
3818
4001
|
{ key: "--customer_name", data: (_b = customer == null ? void 0 : customer.customer_name) != null ? _b : "" },
|
|
3819
4002
|
{ key: "--customer_user_id", data: (_c = customer == null ? void 0 : customer.customer_user_id) != null ? _c : "" },
|
|
3820
4003
|
{ key: "--customer_user_name", data: (_d = customer == null ? void 0 : customer.customer_user_name) != null ? _d : "" },
|
|
@@ -3834,6 +4017,176 @@ var AIChatPanel = ({
|
|
|
3834
4017
|
}, [currentAgentId, agentOptions]);
|
|
3835
4018
|
const currentAgentLabel = currentAgentInfo.label;
|
|
3836
4019
|
const currentAgentAvatarUrl = currentAgentInfo.avatarUrl;
|
|
4020
|
+
const isEmailAddress = (email) => {
|
|
4021
|
+
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
|
4022
|
+
return emailRegex.test(email);
|
|
4023
|
+
};
|
|
4024
|
+
const convertMarkdownToHTML = (markdown) => {
|
|
4025
|
+
const html = ReactDOMServer2.renderToStaticMarkup(
|
|
4026
|
+
/* @__PURE__ */ React12.createElement("div", { className: markdownClass }, /* @__PURE__ */ React12.createElement(
|
|
4027
|
+
ReactMarkdown2,
|
|
4028
|
+
{
|
|
4029
|
+
remarkPlugins: [remarkGfm2],
|
|
4030
|
+
rehypePlugins: [rehypeRaw2]
|
|
4031
|
+
},
|
|
4032
|
+
markdown
|
|
4033
|
+
))
|
|
4034
|
+
);
|
|
4035
|
+
return html;
|
|
4036
|
+
};
|
|
4037
|
+
const convertHistoryToHTML = (history2) => {
|
|
4038
|
+
const stylesheet = `
|
|
4039
|
+
<style>
|
|
4040
|
+
.conversation-history {
|
|
4041
|
+
font-family: Arial, sans-serif;
|
|
4042
|
+
line-height: 1.5;
|
|
4043
|
+
}
|
|
4044
|
+
.history-entry {
|
|
4045
|
+
margin-bottom: 15px;
|
|
4046
|
+
}
|
|
4047
|
+
.prompt-container, .response-container {
|
|
4048
|
+
margin-bottom: 10px;
|
|
4049
|
+
}
|
|
4050
|
+
.prompt, .response {
|
|
4051
|
+
display: block;
|
|
4052
|
+
margin: 5px 0;
|
|
4053
|
+
padding: 10px;
|
|
4054
|
+
border-radius: 5px;
|
|
4055
|
+
max-width: 80%;
|
|
4056
|
+
}
|
|
4057
|
+
.prompt {
|
|
4058
|
+
background-color: #efefef;
|
|
4059
|
+
margin-left: 0;
|
|
4060
|
+
}
|
|
4061
|
+
.response {
|
|
4062
|
+
background-color: #f0fcfd;
|
|
4063
|
+
margin-left: 25px;
|
|
4064
|
+
}
|
|
4065
|
+
</style>
|
|
4066
|
+
`;
|
|
4067
|
+
let html = `
|
|
4068
|
+
<html>
|
|
4069
|
+
<head>
|
|
4070
|
+
${stylesheet}
|
|
4071
|
+
</head>
|
|
4072
|
+
<body>
|
|
4073
|
+
<h1>Conversation History (${(/* @__PURE__ */ new Date()).toLocaleString()})</h1>
|
|
4074
|
+
<div class="conversation-history">
|
|
4075
|
+
`;
|
|
4076
|
+
Object.entries(history2).forEach(([prompt, response2], index) => {
|
|
4077
|
+
if (hideInitialPrompt && index === 0) {
|
|
4078
|
+
html += `
|
|
4079
|
+
<div class="history-entry">
|
|
4080
|
+
<div class="response-container">
|
|
4081
|
+
<div class="response">${convertMarkdownToHTML(response2.content)}</div>
|
|
4082
|
+
</div>
|
|
4083
|
+
</div>
|
|
4084
|
+
`;
|
|
4085
|
+
} else {
|
|
4086
|
+
html += `
|
|
4087
|
+
<div class="history-entry">
|
|
4088
|
+
<div class="prompt-container">
|
|
4089
|
+
<div class="prompt">${convertMarkdownToHTML(
|
|
4090
|
+
formatPromptForDisplay(prompt)
|
|
4091
|
+
)}</div>
|
|
4092
|
+
</div>
|
|
4093
|
+
<div class="response-container">
|
|
4094
|
+
<div class="response">${convertMarkdownToHTML(response2.content)}</div>
|
|
4095
|
+
</div>
|
|
4096
|
+
</div>
|
|
4097
|
+
`;
|
|
4098
|
+
}
|
|
4099
|
+
});
|
|
4100
|
+
html += `
|
|
4101
|
+
</div>
|
|
4102
|
+
</body>
|
|
4103
|
+
</html>
|
|
4104
|
+
`;
|
|
4105
|
+
return html;
|
|
4106
|
+
};
|
|
4107
|
+
const saveHTMLToFile = (html, filename) => {
|
|
4108
|
+
const blob = new Blob([html], { type: "text/html" });
|
|
4109
|
+
const link = document.createElement("a");
|
|
4110
|
+
link.href = URL.createObjectURL(blob);
|
|
4111
|
+
link.download = filename;
|
|
4112
|
+
document.body.appendChild(link);
|
|
4113
|
+
link.click();
|
|
4114
|
+
document.body.removeChild(link);
|
|
4115
|
+
};
|
|
4116
|
+
const saveAsHTMLFile = useCallback2(() => {
|
|
4117
|
+
saveHTMLToFile(
|
|
4118
|
+
convertHistoryToHTML(history),
|
|
4119
|
+
`conversation-${(/* @__PURE__ */ new Date()).toISOString()}.html`
|
|
4120
|
+
);
|
|
4121
|
+
interactionClicked(lastCallId || "", "save");
|
|
4122
|
+
}, [history, lastCallId]);
|
|
4123
|
+
const handleSendEmail = (to, from) => {
|
|
4124
|
+
sendConversationsViaEmail(to, `Conversation History from ${title}`, from);
|
|
4125
|
+
interactionClicked(lastCallId || "", "email", to);
|
|
4126
|
+
setEmailSent(true);
|
|
4127
|
+
};
|
|
4128
|
+
const sendConversationsViaEmail = (_0, ..._1) => __async(void 0, [_0, ..._1], function* (to, subject = `Conversation History from ${title}`, from = "") {
|
|
4129
|
+
fetch(`${publicAPIUrl}/share/email`, {
|
|
4130
|
+
method: "POST",
|
|
4131
|
+
headers: {
|
|
4132
|
+
"Content-Type": "application/json"
|
|
4133
|
+
},
|
|
4134
|
+
body: JSON.stringify({
|
|
4135
|
+
to,
|
|
4136
|
+
from,
|
|
4137
|
+
subject,
|
|
4138
|
+
html: convertHistoryToHTML(history),
|
|
4139
|
+
project_id: project_id != null ? project_id : "",
|
|
4140
|
+
customer,
|
|
4141
|
+
history,
|
|
4142
|
+
title
|
|
4143
|
+
})
|
|
4144
|
+
});
|
|
4145
|
+
yield interactionClicked(lastCallId || "", "email", from);
|
|
4146
|
+
});
|
|
4147
|
+
const sendCallToActionEmail = useCallback2((from) => __async(void 0, null, function* () {
|
|
4148
|
+
try {
|
|
4149
|
+
yield fetch(`${publicAPIUrl}/share/email`, {
|
|
4150
|
+
method: "POST",
|
|
4151
|
+
headers: {
|
|
4152
|
+
"Content-Type": "application/json"
|
|
4153
|
+
},
|
|
4154
|
+
body: JSON.stringify({
|
|
4155
|
+
to: callToActionEmailAddress,
|
|
4156
|
+
from,
|
|
4157
|
+
subject: `${callToActionEmailSubject} from ${from}`,
|
|
4158
|
+
html: convertHistoryToHTML(history),
|
|
4159
|
+
project_id: project_id != null ? project_id : "",
|
|
4160
|
+
customer,
|
|
4161
|
+
history,
|
|
4162
|
+
title
|
|
4163
|
+
})
|
|
4164
|
+
});
|
|
4165
|
+
yield interactionClicked(lastCallId || "", "cta", from);
|
|
4166
|
+
setCallToActionSent(true);
|
|
4167
|
+
} catch (err) {
|
|
4168
|
+
console.error("[AIChatPanel] Failed to send CTA email:", err);
|
|
4169
|
+
}
|
|
4170
|
+
}), [history, title, project_id, customer, lastCallId, publicAPIUrl, callToActionEmailAddress, callToActionEmailSubject]);
|
|
4171
|
+
const isDisabledDueToNoEmail = useCallback2(() => {
|
|
4172
|
+
if (customerEmailCaptureMode === "REQUIRED" && !emailInputSet) {
|
|
4173
|
+
return true;
|
|
4174
|
+
}
|
|
4175
|
+
return false;
|
|
4176
|
+
}, [customerEmailCaptureMode, emailInputSet]);
|
|
4177
|
+
const handleToolApproval = useCallback2((toolName, scope) => {
|
|
4178
|
+
if (scope === "session" || scope === "always") {
|
|
4179
|
+
setSessionApprovedTools((prev) => Array.from(/* @__PURE__ */ new Set([...prev, toolName])));
|
|
4180
|
+
}
|
|
4181
|
+
if (scope === "always") {
|
|
4182
|
+
setAlwaysApprovedTools((prev) => Array.from(/* @__PURE__ */ new Set([...prev, toolName])));
|
|
4183
|
+
}
|
|
4184
|
+
setPendingToolRequests((prev) => prev.filter((r) => r.toolName !== toolName));
|
|
4185
|
+
console.log(`[AIChatPanel] Tool "${toolName}" approved with scope: ${scope}`);
|
|
4186
|
+
}, []);
|
|
4187
|
+
const getUniqueToolNames = useCallback2(() => {
|
|
4188
|
+
return Array.from(new Set(pendingToolRequests.map((r) => r.toolName)));
|
|
4189
|
+
}, [pendingToolRequests]);
|
|
3837
4190
|
const cleanContentForDisplay = useCallback2((content) => {
|
|
3838
4191
|
let cleaned = content.replace(/\*\*(.*?)\*\*/g, "$1").replace(/\*(.*?)\*/g, "$1").replace(/\n+/g, " ").replace(/\s+/g, " ").trim();
|
|
3839
4192
|
if (cleaned.length > 100) {
|
|
@@ -3842,13 +4195,13 @@ var AIChatPanel = ({
|
|
|
3842
4195
|
return cleaned || "Thinking";
|
|
3843
4196
|
}, []);
|
|
3844
4197
|
const processThinkingTags = useCallback2((text) => {
|
|
3845
|
-
var
|
|
4198
|
+
var _a2, _b;
|
|
3846
4199
|
const blocks = [];
|
|
3847
4200
|
let index = 0;
|
|
3848
4201
|
const reasoningRegex = /<reasoning>([\s\S]*?)<\/reasoning>/gi;
|
|
3849
4202
|
let match;
|
|
3850
4203
|
while ((match = reasoningRegex.exec(text)) !== null) {
|
|
3851
|
-
blocks.push({ type: "reasoning", content: (
|
|
4204
|
+
blocks.push({ type: "reasoning", content: (_a2 = match[1]) != null ? _a2 : "", index: index++ });
|
|
3852
4205
|
}
|
|
3853
4206
|
const searchingRegex = /<searching>([\s\S]*?)<\/searching>/gi;
|
|
3854
4207
|
while ((match = searchingRegex.exec(text)) !== null) {
|
|
@@ -3896,12 +4249,12 @@ var AIChatPanel = ({
|
|
|
3896
4249
|
return displayPrompt;
|
|
3897
4250
|
}, [hideRagContextInPrompt]);
|
|
3898
4251
|
const interactionClicked = useCallback2((callId, action, emailaddress = "", comment = "") => __async(void 0, null, function* () {
|
|
3899
|
-
var
|
|
4252
|
+
var _a2, _b;
|
|
3900
4253
|
console.log(`[AIChatPanel] Interaction: ${action} for callId: ${callId}`);
|
|
3901
4254
|
const convId = currentConversation || (yield ensureConversation());
|
|
3902
4255
|
const finalCallId = callId || convId;
|
|
3903
|
-
const
|
|
3904
|
-
const email = emailaddress && emailaddress !== "" ? emailaddress :
|
|
4256
|
+
const isEmailAddress2 = (str) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(str);
|
|
4257
|
+
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 : "";
|
|
3905
4258
|
try {
|
|
3906
4259
|
yield fetch(`${publicAPIUrl}/feedback/${finalCallId}/${action}`, {
|
|
3907
4260
|
method: "POST",
|
|
@@ -3949,20 +4302,20 @@ var AIChatPanel = ({
|
|
|
3949
4302
|
}
|
|
3950
4303
|
}), [thumbsDownClick, interactionClicked]);
|
|
3951
4304
|
const scrollToBottom = useCallback2(() => {
|
|
3952
|
-
var
|
|
4305
|
+
var _a2;
|
|
3953
4306
|
if (scrollRAFRef.current) {
|
|
3954
4307
|
cancelAnimationFrame(scrollRAFRef.current);
|
|
3955
4308
|
}
|
|
3956
4309
|
const now = Date.now();
|
|
3957
4310
|
if (now - lastScrollTimeRef.current < 100) {
|
|
3958
4311
|
scrollRAFRef.current = requestAnimationFrame(() => {
|
|
3959
|
-
var
|
|
3960
|
-
(
|
|
4312
|
+
var _a3;
|
|
4313
|
+
(_a3 = bottomRef.current) == null ? void 0 : _a3.scrollIntoView({ behavior: "auto" });
|
|
3961
4314
|
lastScrollTimeRef.current = Date.now();
|
|
3962
4315
|
});
|
|
3963
4316
|
return;
|
|
3964
4317
|
}
|
|
3965
|
-
(
|
|
4318
|
+
(_a2 = bottomRef.current) == null ? void 0 : _a2.scrollIntoView({ behavior: "auto" });
|
|
3966
4319
|
lastScrollTimeRef.current = now;
|
|
3967
4320
|
}, []);
|
|
3968
4321
|
const continueChat = useCallback2((promptText) => {
|
|
@@ -4020,11 +4373,6 @@ var AIChatPanel = ({
|
|
|
4020
4373
|
if (messagesAndHistory.length === 0 && promptTemplate) {
|
|
4021
4374
|
fullPromptToSend = promptTemplate.replace("{{prompt}}", fullPromptToSend);
|
|
4022
4375
|
}
|
|
4023
|
-
if (followOnPrompt) {
|
|
4024
|
-
fullPromptToSend += `
|
|
4025
|
-
|
|
4026
|
-
${followOnPrompt}`;
|
|
4027
|
-
}
|
|
4028
4376
|
const newController = new AbortController();
|
|
4029
4377
|
setLastController(newController);
|
|
4030
4378
|
send(
|
|
@@ -4092,7 +4440,6 @@ ${followOnPrompt}`;
|
|
|
4092
4440
|
clearFollowOnQuestionsNextPrompt,
|
|
4093
4441
|
history,
|
|
4094
4442
|
promptTemplate,
|
|
4095
|
-
followOnPrompt,
|
|
4096
4443
|
send,
|
|
4097
4444
|
service,
|
|
4098
4445
|
ensureConversation,
|
|
@@ -4134,9 +4481,9 @@ ${followOnPrompt}`;
|
|
|
4134
4481
|
setUserHasScrolled(false);
|
|
4135
4482
|
setError(null);
|
|
4136
4483
|
setTimeout(() => {
|
|
4137
|
-
var
|
|
4484
|
+
var _a2;
|
|
4138
4485
|
setJustReset(false);
|
|
4139
|
-
(
|
|
4486
|
+
(_a2 = responseAreaRef.current) == null ? void 0 : _a2.scrollTo({ top: 0, behavior: "smooth" });
|
|
4140
4487
|
}, 100);
|
|
4141
4488
|
}, [newConversationConfirm, idle, stop, lastController, setResponse, followOnQuestions]);
|
|
4142
4489
|
useEffect7(() => {
|
|
@@ -4180,10 +4527,11 @@ ${followOnPrompt}`;
|
|
|
4180
4527
|
}
|
|
4181
4528
|
}, [idle]);
|
|
4182
4529
|
useEffect7(() => {
|
|
4183
|
-
|
|
4530
|
+
const shouldAutoScroll = scrollToEnd || !userHasScrolled;
|
|
4531
|
+
if (!idle && shouldAutoScroll && response) {
|
|
4184
4532
|
scrollToBottom();
|
|
4185
4533
|
}
|
|
4186
|
-
}, [response, scrollToBottom, idle, userHasScrolled]);
|
|
4534
|
+
}, [response, scrollToBottom, idle, userHasScrolled, scrollToEnd]);
|
|
4187
4535
|
const idleRef = useRef5(idle);
|
|
4188
4536
|
idleRef.current = idle;
|
|
4189
4537
|
const userHasScrolledRef = useRef5(userHasScrolled);
|
|
@@ -4242,6 +4590,12 @@ ${followOnPrompt}`;
|
|
|
4242
4590
|
continueChat(initialPrompt);
|
|
4243
4591
|
}
|
|
4244
4592
|
}, [initialPrompt, continueChat]);
|
|
4593
|
+
useEffect7(() => {
|
|
4594
|
+
if (followOnPrompt && followOnPrompt !== "" && followOnPrompt !== lastFollowOnPromptRef.current) {
|
|
4595
|
+
lastFollowOnPromptRef.current = followOnPrompt;
|
|
4596
|
+
continueChat(followOnPrompt);
|
|
4597
|
+
}
|
|
4598
|
+
}, [followOnPrompt, continueChat]);
|
|
4245
4599
|
useEffect7(() => {
|
|
4246
4600
|
if (llmError && llmError.trim()) {
|
|
4247
4601
|
console.log("[AIChatPanel] Error detected:", llmError);
|
|
@@ -4273,20 +4627,66 @@ ${followOnPrompt}`;
|
|
|
4273
4627
|
}
|
|
4274
4628
|
}
|
|
4275
4629
|
}, [llmError, lastKey, lastCallId]);
|
|
4276
|
-
|
|
4277
|
-
|
|
4630
|
+
useEffect7(() => {
|
|
4631
|
+
const existingLinks = document.querySelectorAll(
|
|
4632
|
+
'link[data-source="ai-chat-panel"]'
|
|
4633
|
+
);
|
|
4634
|
+
existingLinks.forEach((link) => {
|
|
4635
|
+
var _a2;
|
|
4636
|
+
return (_a2 = link.parentNode) == null ? void 0 : _a2.removeChild(link);
|
|
4637
|
+
});
|
|
4638
|
+
const existingStyles = document.querySelectorAll(
|
|
4639
|
+
'style[data-source="ai-chat-panel"]'
|
|
4640
|
+
);
|
|
4641
|
+
existingStyles.forEach((style) => {
|
|
4642
|
+
var _a2;
|
|
4643
|
+
return (_a2 = style.parentNode) == null ? void 0 : _a2.removeChild(style);
|
|
4644
|
+
});
|
|
4645
|
+
if (cssUrl) {
|
|
4646
|
+
if (cssUrl.startsWith("http://") || cssUrl.startsWith("https://")) {
|
|
4647
|
+
const link = document.createElement("link");
|
|
4648
|
+
link.href = cssUrl;
|
|
4649
|
+
link.rel = "stylesheet";
|
|
4650
|
+
link.setAttribute("data-source", "ai-chat-panel");
|
|
4651
|
+
document.head.appendChild(link);
|
|
4652
|
+
} else {
|
|
4653
|
+
const style = document.createElement("style");
|
|
4654
|
+
style.textContent = cssUrl;
|
|
4655
|
+
style.setAttribute("data-source", "ai-chat-panel");
|
|
4656
|
+
document.head.appendChild(style);
|
|
4657
|
+
}
|
|
4658
|
+
}
|
|
4659
|
+
return () => {
|
|
4660
|
+
const links = document.querySelectorAll(
|
|
4661
|
+
'link[data-source="ai-chat-panel"]'
|
|
4662
|
+
);
|
|
4663
|
+
links.forEach((link) => {
|
|
4664
|
+
var _a2;
|
|
4665
|
+
return (_a2 = link.parentNode) == null ? void 0 : _a2.removeChild(link);
|
|
4666
|
+
});
|
|
4667
|
+
const styles = document.querySelectorAll(
|
|
4668
|
+
'style[data-source="ai-chat-panel"]'
|
|
4669
|
+
);
|
|
4670
|
+
styles.forEach((style) => {
|
|
4671
|
+
var _a2;
|
|
4672
|
+
return (_a2 = style.parentNode) == null ? void 0 : _a2.removeChild(style);
|
|
4673
|
+
});
|
|
4674
|
+
};
|
|
4675
|
+
}, [cssUrl]);
|
|
4676
|
+
const CodeBlock = useCallback2((_b) => {
|
|
4677
|
+
var _c = _b, { node, inline, className, children } = _c, props = __objRest(_c, ["node", "inline", "className", "children"]);
|
|
4278
4678
|
const match = /language-(\w+)/.exec(className || "");
|
|
4279
|
-
return !inline && match ? /* @__PURE__ */
|
|
4679
|
+
return !inline && match ? /* @__PURE__ */ React12.createElement(
|
|
4280
4680
|
SyntaxHighlighter2,
|
|
4281
4681
|
__spreadValues({
|
|
4282
|
-
style:
|
|
4682
|
+
style: effectivePrismStyle,
|
|
4283
4683
|
language: match[1],
|
|
4284
4684
|
PreTag: "div"
|
|
4285
4685
|
}, props),
|
|
4286
4686
|
String(children).replace(/\n$/, "")
|
|
4287
|
-
) : /* @__PURE__ */
|
|
4288
|
-
}, [
|
|
4289
|
-
const AgentSuggestionCard =
|
|
4687
|
+
) : /* @__PURE__ */ React12.createElement("code", __spreadValues({ className }, props), children);
|
|
4688
|
+
}, [effectivePrismStyle]);
|
|
4689
|
+
const AgentSuggestionCard = React12.memo(({ agentId, agentName, reason }) => {
|
|
4290
4690
|
useEffect7(() => {
|
|
4291
4691
|
const timer = setTimeout(() => {
|
|
4292
4692
|
scrollToBottom();
|
|
@@ -4301,33 +4701,33 @@ ${followOnPrompt}`;
|
|
|
4301
4701
|
const avatarUrl = agentOption == null ? void 0 : agentOption.avatarUrl;
|
|
4302
4702
|
const isCurrentAgent = currentAgentId === agentId;
|
|
4303
4703
|
if (!isValidAgent || agentId.includes("{") || agentId.includes("$")) {
|
|
4304
|
-
return /* @__PURE__ */
|
|
4704
|
+
return /* @__PURE__ */ React12.createElement("span", { className: "ai-chat-agent-suggestion ai-chat-agent-suggestion--invalid" }, /* @__PURE__ */ React12.createElement("span", { className: "ai-chat-agent-suggestion__content" }, avatarUrl ? /* @__PURE__ */ React12.createElement(
|
|
4305
4705
|
"img",
|
|
4306
4706
|
{
|
|
4307
4707
|
src: avatarUrl,
|
|
4308
4708
|
alt: agentName,
|
|
4309
4709
|
className: "ai-chat-agent-suggestion__avatar"
|
|
4310
4710
|
}
|
|
4311
|
-
) : /* @__PURE__ */
|
|
4711
|
+
) : /* @__PURE__ */ React12.createElement("span", { className: "ai-chat-agent-suggestion__icon" }, /* @__PURE__ */ React12.createElement("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ React12.createElement("path", { d: "M12 8V4H8" }), /* @__PURE__ */ React12.createElement("rect", { width: "16", height: "12", x: "4", y: "8", rx: "2" }), /* @__PURE__ */ React12.createElement("path", { d: "M2 14h2" }), /* @__PURE__ */ React12.createElement("path", { d: "M20 14h2" }), /* @__PURE__ */ React12.createElement("path", { d: "M15 13v2" }), /* @__PURE__ */ React12.createElement("path", { d: "M9 13v2" }))), /* @__PURE__ */ React12.createElement("span", { className: "ai-chat-agent-suggestion__text" }, /* @__PURE__ */ React12.createElement("span", { className: "ai-chat-agent-suggestion__label" }, "Suggested: ", agentName), reason && /* @__PURE__ */ React12.createElement("span", { className: "ai-chat-agent-suggestion__reason" }, reason))), /* @__PURE__ */ React12.createElement("span", { className: "ai-chat-agent-suggestion__unavailable" }, "Agent unavailable"));
|
|
4312
4712
|
}
|
|
4313
4713
|
if (isCurrentAgent) {
|
|
4314
|
-
return /* @__PURE__ */
|
|
4714
|
+
return /* @__PURE__ */ React12.createElement("span", { className: "ai-chat-agent-suggestion ai-chat-agent-suggestion--switched" }, /* @__PURE__ */ React12.createElement("span", { className: "ai-chat-agent-suggestion__content" }, avatarUrl ? /* @__PURE__ */ React12.createElement(
|
|
4315
4715
|
"img",
|
|
4316
4716
|
{
|
|
4317
4717
|
src: avatarUrl,
|
|
4318
4718
|
alt: agentName,
|
|
4319
4719
|
className: "ai-chat-agent-suggestion__avatar"
|
|
4320
4720
|
}
|
|
4321
|
-
) : /* @__PURE__ */
|
|
4721
|
+
) : /* @__PURE__ */ React12.createElement("span", { className: "ai-chat-agent-suggestion__icon ai-chat-agent-suggestion__icon--switched" }, /* @__PURE__ */ React12.createElement("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ React12.createElement("polyline", { points: "20 6 9 17 4 12" }))), /* @__PURE__ */ React12.createElement("span", { className: "ai-chat-agent-suggestion__text" }, /* @__PURE__ */ React12.createElement("span", { className: "ai-chat-agent-suggestion__label" }, "Switched to ", agentName), reason && /* @__PURE__ */ React12.createElement("span", { className: "ai-chat-agent-suggestion__reason" }, reason))), /* @__PURE__ */ React12.createElement("span", { className: "ai-chat-agent-suggestion__switched-badge" }, /* @__PURE__ */ React12.createElement("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ React12.createElement("polyline", { points: "20 6 9 17 4 12" })), "Active"));
|
|
4322
4722
|
}
|
|
4323
|
-
return /* @__PURE__ */
|
|
4723
|
+
return /* @__PURE__ */ React12.createElement("span", { className: "ai-chat-agent-suggestion" }, /* @__PURE__ */ React12.createElement("span", { className: "ai-chat-agent-suggestion__content" }, avatarUrl ? /* @__PURE__ */ React12.createElement(
|
|
4324
4724
|
"img",
|
|
4325
4725
|
{
|
|
4326
4726
|
src: avatarUrl,
|
|
4327
4727
|
alt: agentName,
|
|
4328
4728
|
className: "ai-chat-agent-suggestion__avatar"
|
|
4329
4729
|
}
|
|
4330
|
-
) : /* @__PURE__ */
|
|
4730
|
+
) : /* @__PURE__ */ React12.createElement("span", { className: "ai-chat-agent-suggestion__icon" }, /* @__PURE__ */ React12.createElement("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ React12.createElement("path", { d: "M12 8V4H8" }), /* @__PURE__ */ React12.createElement("rect", { width: "16", height: "12", x: "4", y: "8", rx: "2" }), /* @__PURE__ */ React12.createElement("path", { d: "M2 14h2" }), /* @__PURE__ */ React12.createElement("path", { d: "M20 14h2" }), /* @__PURE__ */ React12.createElement("path", { d: "M15 13v2" }), /* @__PURE__ */ React12.createElement("path", { d: "M9 13v2" }))), /* @__PURE__ */ React12.createElement("span", { className: "ai-chat-agent-suggestion__text" }, /* @__PURE__ */ React12.createElement("span", { className: "ai-chat-agent-suggestion__label" }, "Suggested: ", agentName), reason && /* @__PURE__ */ React12.createElement("span", { className: "ai-chat-agent-suggestion__reason" }, reason))), /* @__PURE__ */ React12.createElement(
|
|
4331
4731
|
Button,
|
|
4332
4732
|
{
|
|
4333
4733
|
variant: "default",
|
|
@@ -4345,13 +4745,13 @@ ${followOnPrompt}`;
|
|
|
4345
4745
|
});
|
|
4346
4746
|
const markdownComponents = useMemo2(() => ({
|
|
4347
4747
|
code: CodeBlock,
|
|
4348
|
-
"agent-suggestion": (
|
|
4349
|
-
var _b =
|
|
4748
|
+
"agent-suggestion": (_a2) => {
|
|
4749
|
+
var _b = _a2, { node } = _b, props = __objRest(_b, ["node"]);
|
|
4350
4750
|
const agentId = props["data-agent-id"];
|
|
4351
4751
|
const agentName = props["data-agent-name"];
|
|
4352
4752
|
const reason = props["data-reason"];
|
|
4353
4753
|
if (!agentId) return null;
|
|
4354
|
-
return /* @__PURE__ */
|
|
4754
|
+
return /* @__PURE__ */ React12.createElement(
|
|
4355
4755
|
AgentSuggestionCard,
|
|
4356
4756
|
{
|
|
4357
4757
|
agentId,
|
|
@@ -4366,126 +4766,341 @@ ${followOnPrompt}`;
|
|
|
4366
4766
|
const currentBlock = thinkingBlocks[currentThinkingIndex];
|
|
4367
4767
|
if (!currentBlock) return null;
|
|
4368
4768
|
const isReasoning = currentBlock.type === "reasoning";
|
|
4369
|
-
const icon = isReasoning ? /* @__PURE__ */
|
|
4769
|
+
const icon = isReasoning ? /* @__PURE__ */ React12.createElement(BrainIcon, null) : /* @__PURE__ */ React12.createElement(SearchIcon, null);
|
|
4370
4770
|
const title2 = isReasoning ? "Reasoning" : "Searching";
|
|
4371
|
-
return /* @__PURE__ */
|
|
4771
|
+
return /* @__PURE__ */ React12.createElement("div", { className: "ai-chat-thinking" }, /* @__PURE__ */ React12.createElement("div", { className: "ai-chat-thinking__header" }, /* @__PURE__ */ React12.createElement("span", { className: "ai-chat-thinking__icon" }, icon), /* @__PURE__ */ React12.createElement("span", { className: "ai-chat-thinking__title" }, title2), thinkingBlocks.length > 1 && /* @__PURE__ */ React12.createElement("span", { className: "ai-chat-thinking__nav" }, /* @__PURE__ */ React12.createElement(
|
|
4372
4772
|
"button",
|
|
4373
4773
|
{
|
|
4374
4774
|
onClick: () => setCurrentThinkingIndex(Math.max(0, currentThinkingIndex - 1)),
|
|
4375
4775
|
disabled: currentThinkingIndex === 0
|
|
4376
4776
|
},
|
|
4377
4777
|
"\u2039"
|
|
4378
|
-
), /* @__PURE__ */
|
|
4778
|
+
), /* @__PURE__ */ React12.createElement("span", null, currentThinkingIndex + 1, " / ", thinkingBlocks.length), /* @__PURE__ */ React12.createElement(
|
|
4379
4779
|
"button",
|
|
4380
4780
|
{
|
|
4381
4781
|
onClick: () => setCurrentThinkingIndex(Math.min(thinkingBlocks.length - 1, currentThinkingIndex + 1)),
|
|
4382
4782
|
disabled: currentThinkingIndex === thinkingBlocks.length - 1
|
|
4383
4783
|
},
|
|
4384
4784
|
"\u203A"
|
|
4385
|
-
))), /* @__PURE__ */
|
|
4785
|
+
))), /* @__PURE__ */ React12.createElement("div", { className: "ai-chat-thinking__content" }, cleanContentForDisplay(currentBlock.content)));
|
|
4386
4786
|
}, [thinkingBlocks, currentThinkingIndex, cleanContentForDisplay]);
|
|
4387
4787
|
const panelClasses = ["ai-chat-panel", theme === "dark" ? "dark-theme" : ""].filter(Boolean).join(" ");
|
|
4388
|
-
return /* @__PURE__ */
|
|
4389
|
-
"
|
|
4788
|
+
return /* @__PURE__ */ React12.createElement(
|
|
4789
|
+
"div",
|
|
4390
4790
|
{
|
|
4391
|
-
className:
|
|
4392
|
-
|
|
4393
|
-
"aria-label": "Dismiss error"
|
|
4791
|
+
className: panelClasses,
|
|
4792
|
+
style: __spreadValues(__spreadValues({}, width && { width }), height && { height })
|
|
4394
4793
|
},
|
|
4395
|
-
/* @__PURE__ */
|
|
4396
|
-
|
|
4397
|
-
|
|
4398
|
-
|
|
4399
|
-
|
|
4400
|
-
|
|
4401
|
-
|
|
4794
|
+
title && /* @__PURE__ */ React12.createElement("div", { className: "ai-chat-panel__title" }, title),
|
|
4795
|
+
error && /* @__PURE__ */ React12.createElement("div", { className: "ai-chat-error-banner" }, /* @__PURE__ */ React12.createElement("div", { className: "ai-chat-error-banner__icon" }, /* @__PURE__ */ React12.createElement(AlertCircleIcon, null)), /* @__PURE__ */ React12.createElement("div", { className: "ai-chat-error-banner__content" }, /* @__PURE__ */ React12.createElement("div", { className: "ai-chat-error-banner__message" }, error.message), error.code === "413" && /* @__PURE__ */ React12.createElement("div", { className: "ai-chat-error-banner__hint" }, "Try starting a new conversation or reducing the amount of information being sent.")), /* @__PURE__ */ React12.createElement(
|
|
4796
|
+
"button",
|
|
4797
|
+
{
|
|
4798
|
+
className: "ai-chat-error-banner__close",
|
|
4799
|
+
onClick: () => setError(null),
|
|
4800
|
+
"aria-label": "Dismiss error"
|
|
4801
|
+
},
|
|
4802
|
+
/* @__PURE__ */ React12.createElement(CloseIcon, null)
|
|
4803
|
+
)),
|
|
4804
|
+
/* @__PURE__ */ React12.createElement(ScrollArea, { className: "ai-chat-panel__messages", ref: responseAreaRef }, initialMessage && /* @__PURE__ */ React12.createElement("div", { className: "ai-chat-message ai-chat-message--assistant" }, /* @__PURE__ */ React12.createElement("div", { className: "ai-chat-message__content" }, markdownClass ? /* @__PURE__ */ React12.createElement("div", { className: markdownClass }, /* @__PURE__ */ React12.createElement(
|
|
4402
4805
|
ReactMarkdown2,
|
|
4403
4806
|
{
|
|
4404
4807
|
remarkPlugins: [remarkGfm2],
|
|
4405
|
-
rehypePlugins: [rehypeRaw2]
|
|
4406
|
-
components: markdownComponents
|
|
4808
|
+
rehypePlugins: [rehypeRaw2]
|
|
4407
4809
|
},
|
|
4408
|
-
|
|
4409
|
-
)
|
|
4810
|
+
initialMessage
|
|
4811
|
+
)) : /* @__PURE__ */ React12.createElement(
|
|
4410
4812
|
ReactMarkdown2,
|
|
4411
4813
|
{
|
|
4412
4814
|
remarkPlugins: [remarkGfm2],
|
|
4413
|
-
rehypePlugins: [rehypeRaw2]
|
|
4414
|
-
components: markdownComponents
|
|
4815
|
+
rehypePlugins: [rehypeRaw2]
|
|
4415
4816
|
},
|
|
4416
|
-
|
|
4417
|
-
))), (
|
|
4418
|
-
|
|
4817
|
+
initialMessage
|
|
4818
|
+
))), Object.entries(history).map(([prompt, entry], index, entries) => {
|
|
4819
|
+
const isLastEntry = index === entries.length - 1;
|
|
4820
|
+
const isSystemMessage = prompt.startsWith("__system__:");
|
|
4821
|
+
const { cleanedText } = processThinkingTags(entry.content);
|
|
4822
|
+
const processedContent = processActions(cleanedText);
|
|
4823
|
+
return /* @__PURE__ */ React12.createElement("div", { key: index, className: "ai-chat-entry" }, !(hideInitialPrompt && index === 0) && !isSystemMessage && /* @__PURE__ */ React12.createElement("div", { className: "ai-chat-message ai-chat-message--user" }, /* @__PURE__ */ React12.createElement("div", { className: "ai-chat-message__content" }, formatPromptForDisplay(prompt))), /* @__PURE__ */ React12.createElement("div", { className: "ai-chat-message ai-chat-message--assistant" }, /* @__PURE__ */ React12.createElement("div", { className: "ai-chat-message__content" }, isLastEntry && (isLoading || !idle) && !justReset ? /* @__PURE__ */ React12.createElement("div", { className: "ai-chat-streaming" }, thinkingBlocks.length > 0 && renderThinkingBlocks(), processedContent ? markdownClass ? /* @__PURE__ */ React12.createElement("div", { className: markdownClass }, /* @__PURE__ */ React12.createElement(
|
|
4824
|
+
ReactMarkdown2,
|
|
4825
|
+
{
|
|
4826
|
+
remarkPlugins: [remarkGfm2],
|
|
4827
|
+
rehypePlugins: [rehypeRaw2],
|
|
4828
|
+
components: markdownComponents
|
|
4829
|
+
},
|
|
4830
|
+
processedContent
|
|
4831
|
+
)) : /* @__PURE__ */ React12.createElement(
|
|
4832
|
+
ReactMarkdown2,
|
|
4833
|
+
{
|
|
4834
|
+
remarkPlugins: [remarkGfm2],
|
|
4835
|
+
rehypePlugins: [rehypeRaw2],
|
|
4836
|
+
components: markdownComponents
|
|
4837
|
+
},
|
|
4838
|
+
processedContent
|
|
4839
|
+
) : /* @__PURE__ */ React12.createElement("div", { className: "ai-chat-loading" }, /* @__PURE__ */ React12.createElement("span", null, "Thinking"), /* @__PURE__ */ React12.createElement("span", { className: "ai-chat-loading__dots" }, /* @__PURE__ */ React12.createElement("span", { className: "ai-chat-loading__dot" }), /* @__PURE__ */ React12.createElement("span", { className: "ai-chat-loading__dot" }), /* @__PURE__ */ React12.createElement("span", { className: "ai-chat-loading__dot" })))) : /* @__PURE__ */ React12.createElement(React12.Fragment, null, isLastEntry && thinkingBlocks.length > 0 && renderThinkingBlocks(), markdownClass ? /* @__PURE__ */ React12.createElement("div", { className: markdownClass }, /* @__PURE__ */ React12.createElement(
|
|
4840
|
+
ReactMarkdown2,
|
|
4841
|
+
{
|
|
4842
|
+
remarkPlugins: [remarkGfm2],
|
|
4843
|
+
rehypePlugins: [rehypeRaw2],
|
|
4844
|
+
components: markdownComponents
|
|
4845
|
+
},
|
|
4846
|
+
processedContent
|
|
4847
|
+
)) : /* @__PURE__ */ React12.createElement(
|
|
4848
|
+
ReactMarkdown2,
|
|
4849
|
+
{
|
|
4850
|
+
remarkPlugins: [remarkGfm2],
|
|
4851
|
+
rehypePlugins: [rehypeRaw2],
|
|
4852
|
+
components: markdownComponents
|
|
4853
|
+
},
|
|
4854
|
+
processedContent
|
|
4855
|
+
))), (!isLastEntry || !isLoading) && /* @__PURE__ */ React12.createElement("div", { className: "ai-chat-message__actions" }, /* @__PURE__ */ React12.createElement(
|
|
4856
|
+
"button",
|
|
4857
|
+
{
|
|
4858
|
+
className: "ai-chat-action-button",
|
|
4859
|
+
onClick: () => copyToClipboard(entry.content, entry.callId),
|
|
4860
|
+
title: copiedCallId === entry.callId ? "Copied!" : "Copy"
|
|
4861
|
+
},
|
|
4862
|
+
copiedCallId === entry.callId ? /* @__PURE__ */ React12.createElement("span", { style: { fontSize: "11px", fontWeight: 500 } }, "Copied!") : /* @__PURE__ */ React12.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__ */ React12.createElement("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2", ry: "2" }), /* @__PURE__ */ React12.createElement("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" }))
|
|
4863
|
+
), /* @__PURE__ */ React12.createElement(
|
|
4864
|
+
"button",
|
|
4865
|
+
{
|
|
4866
|
+
className: "ai-chat-action-button",
|
|
4867
|
+
onClick: () => handleThumbsUp(entry.callId),
|
|
4868
|
+
title: (feedbackCallId == null ? void 0 : feedbackCallId.callId) === entry.callId && (feedbackCallId == null ? void 0 : feedbackCallId.type) === "up" ? "Thanks!" : "Good response",
|
|
4869
|
+
style: (feedbackCallId == null ? void 0 : feedbackCallId.callId) === entry.callId && (feedbackCallId == null ? void 0 : feedbackCallId.type) === "up" ? { color: "#22c55e" } : void 0
|
|
4870
|
+
},
|
|
4871
|
+
(feedbackCallId == null ? void 0 : feedbackCallId.callId) === entry.callId && (feedbackCallId == null ? void 0 : feedbackCallId.type) === "up" ? /* @__PURE__ */ React12.createElement("span", { style: { fontSize: "11px", fontWeight: 500 } }, "Thanks!") : /* @__PURE__ */ React12.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__ */ React12.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" }))
|
|
4872
|
+
), /* @__PURE__ */ React12.createElement(
|
|
4873
|
+
"button",
|
|
4874
|
+
{
|
|
4875
|
+
className: "ai-chat-action-button",
|
|
4876
|
+
onClick: () => handleThumbsDown(entry.callId),
|
|
4877
|
+
title: (feedbackCallId == null ? void 0 : feedbackCallId.callId) === entry.callId && (feedbackCallId == null ? void 0 : feedbackCallId.type) === "down" ? "Thanks!" : "Poor response",
|
|
4878
|
+
style: (feedbackCallId == null ? void 0 : feedbackCallId.callId) === entry.callId && (feedbackCallId == null ? void 0 : feedbackCallId.type) === "down" ? { color: "#ef4444" } : void 0
|
|
4879
|
+
},
|
|
4880
|
+
(feedbackCallId == null ? void 0 : feedbackCallId.callId) === entry.callId && (feedbackCallId == null ? void 0 : feedbackCallId.type) === "down" ? /* @__PURE__ */ React12.createElement("span", { style: { fontSize: "11px", fontWeight: 500 } }, "Thanks!") : /* @__PURE__ */ React12.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__ */ React12.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" }))
|
|
4881
|
+
), (entry.toolCalls || entry.toolResponses) && /* @__PURE__ */ React12.createElement(
|
|
4882
|
+
"button",
|
|
4883
|
+
{
|
|
4884
|
+
className: "ai-chat-action-button",
|
|
4885
|
+
onClick: () => {
|
|
4886
|
+
setToolInfoData({
|
|
4887
|
+
calls: entry.toolCalls || [],
|
|
4888
|
+
responses: entry.toolResponses || []
|
|
4889
|
+
});
|
|
4890
|
+
setIsToolInfoModalOpen(true);
|
|
4891
|
+
},
|
|
4892
|
+
title: "View tool information"
|
|
4893
|
+
},
|
|
4894
|
+
/* @__PURE__ */ React12.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__ */ React12.createElement("circle", { cx: "12", cy: "12", r: "10" }), /* @__PURE__ */ React12.createElement("line", { x1: "12", x2: "12", y1: "16", y2: "12" }), /* @__PURE__ */ React12.createElement("line", { x1: "12", x2: "12.01", y1: "8", y2: "8" }))
|
|
4895
|
+
))));
|
|
4896
|
+
}), followOnQuestionsState.length > 0 && idle && !isLoading && /* @__PURE__ */ React12.createElement("div", { className: "ai-chat-suggestions" }, followOnQuestionsState.map((question, index) => /* @__PURE__ */ React12.createElement(
|
|
4897
|
+
Button,
|
|
4419
4898
|
{
|
|
4420
|
-
|
|
4421
|
-
|
|
4422
|
-
|
|
4899
|
+
key: index,
|
|
4900
|
+
variant: "outline",
|
|
4901
|
+
size: "sm",
|
|
4902
|
+
onClick: () => handleSuggestionClick(question),
|
|
4903
|
+
className: "ai-chat-suggestions__button"
|
|
4423
4904
|
},
|
|
4424
|
-
|
|
4425
|
-
), /* @__PURE__ */
|
|
4426
|
-
|
|
4905
|
+
question
|
|
4906
|
+
))), /* @__PURE__ */ React12.createElement("div", { ref: bottomRef })),
|
|
4907
|
+
pendingToolRequests.length > 0 && /* @__PURE__ */ React12.createElement("div", { className: "ai-chat-approve-tools-panel" }, /* @__PURE__ */ React12.createElement("div", { className: "ai-chat-approve-tools-header" }, "Tool Approval Required"), /* @__PURE__ */ React12.createElement("div", { className: "ai-chat-approve-tools-description" }, "The AI wants to use the following tools:"), getUniqueToolNames().map((toolName) => /* @__PURE__ */ React12.createElement("div", { key: toolName, className: "ai-chat-approve-tool-item" }, /* @__PURE__ */ React12.createElement("div", { className: "ai-chat-approve-tool-name" }, toolName), /* @__PURE__ */ React12.createElement("div", { className: "ai-chat-approve-tools-buttons" }, /* @__PURE__ */ React12.createElement(
|
|
4908
|
+
Button,
|
|
4909
|
+
{
|
|
4910
|
+
size: "sm",
|
|
4911
|
+
variant: "outline",
|
|
4912
|
+
className: "ai-chat-approve-tools-button",
|
|
4913
|
+
onClick: () => handleToolApproval(toolName, "once")
|
|
4914
|
+
},
|
|
4915
|
+
"Once"
|
|
4916
|
+
), /* @__PURE__ */ React12.createElement(
|
|
4917
|
+
Button,
|
|
4918
|
+
{
|
|
4919
|
+
size: "sm",
|
|
4920
|
+
variant: "outline",
|
|
4921
|
+
className: "ai-chat-approve-tools-button",
|
|
4922
|
+
onClick: () => handleToolApproval(toolName, "session")
|
|
4923
|
+
},
|
|
4924
|
+
"This Session"
|
|
4925
|
+
), /* @__PURE__ */ React12.createElement(
|
|
4926
|
+
Button,
|
|
4927
|
+
{
|
|
4928
|
+
size: "sm",
|
|
4929
|
+
variant: "default",
|
|
4930
|
+
className: "ai-chat-approve-tools-button",
|
|
4931
|
+
onClick: () => handleToolApproval(toolName, "always")
|
|
4932
|
+
},
|
|
4933
|
+
"Always"
|
|
4934
|
+
))))),
|
|
4935
|
+
(showSaveButton || showEmailButton || showCallToAction) && /* @__PURE__ */ React12.createElement("div", { className: "ai-chat-button-container" }, showSaveButton && /* @__PURE__ */ React12.createElement(
|
|
4936
|
+
Button,
|
|
4937
|
+
{
|
|
4938
|
+
variant: "outline",
|
|
4939
|
+
size: "sm",
|
|
4940
|
+
onClick: saveAsHTMLFile,
|
|
4941
|
+
disabled: Object.keys(history).length === 0,
|
|
4942
|
+
className: "ai-chat-save-button"
|
|
4943
|
+
},
|
|
4944
|
+
"\u{1F4BE} Save"
|
|
4945
|
+
), showEmailButton && /* @__PURE__ */ React12.createElement(
|
|
4946
|
+
Button,
|
|
4427
4947
|
{
|
|
4428
|
-
|
|
4429
|
-
|
|
4430
|
-
|
|
4431
|
-
|
|
4948
|
+
variant: "outline",
|
|
4949
|
+
size: "sm",
|
|
4950
|
+
onClick: () => {
|
|
4951
|
+
if (isEmailAddress(emailInput)) {
|
|
4952
|
+
setEmailInputSet(true);
|
|
4953
|
+
setEmailValid(true);
|
|
4954
|
+
handleSendEmail(emailInput, emailInput);
|
|
4955
|
+
setEmailClickedButNoEmail(false);
|
|
4956
|
+
} else {
|
|
4957
|
+
setShowEmailPanel(true);
|
|
4958
|
+
setEmailValid(false);
|
|
4959
|
+
setEmailClickedButNoEmail(true);
|
|
4960
|
+
}
|
|
4961
|
+
},
|
|
4962
|
+
disabled: Object.keys(history).length === 0 || isDisabledDueToNoEmail(),
|
|
4963
|
+
className: "ai-chat-email-button"
|
|
4432
4964
|
},
|
|
4433
|
-
|
|
4434
|
-
|
|
4965
|
+
"\u{1F4E7} Email Conversation",
|
|
4966
|
+
emailSent ? " \u2713" : ""
|
|
4967
|
+
), showCallToAction && /* @__PURE__ */ React12.createElement(
|
|
4968
|
+
Button,
|
|
4969
|
+
{
|
|
4970
|
+
variant: callToActionSent ? "outline" : "default",
|
|
4971
|
+
size: "sm",
|
|
4972
|
+
onClick: () => {
|
|
4973
|
+
if (customerEmailCaptureMode !== "HIDE" && !emailInputSet) {
|
|
4974
|
+
setCTAClickedButNoEmail(true);
|
|
4975
|
+
setTimeout(() => setCTAClickedButNoEmail(false), 3e3);
|
|
4976
|
+
return;
|
|
4977
|
+
}
|
|
4978
|
+
const fromEmail = emailInput || (customer == null ? void 0 : customer.customer_user_email) || "";
|
|
4979
|
+
sendCallToActionEmail(fromEmail);
|
|
4980
|
+
},
|
|
4981
|
+
disabled: callToActionSent || Object.keys(history).length === 0,
|
|
4982
|
+
className: "ai-chat-cta-button"
|
|
4983
|
+
},
|
|
4984
|
+
callToActionSent ? "\u2713 Submitted" : callToActionButtonText
|
|
4985
|
+
)),
|
|
4986
|
+
showNewConversationButton && /* @__PURE__ */ React12.createElement("div", { className: "ai-chat-panel__new-conversation" }, /* @__PURE__ */ React12.createElement(
|
|
4987
|
+
Button,
|
|
4988
|
+
{
|
|
4989
|
+
variant: newConversationConfirm ? "destructive" : "outline",
|
|
4990
|
+
size: "sm",
|
|
4991
|
+
onClick: handleNewConversation,
|
|
4992
|
+
className: "ai-chat-new-conversation"
|
|
4993
|
+
},
|
|
4994
|
+
newConversationConfirm ? "Click to Confirm" : "New Conversation"
|
|
4995
|
+
)),
|
|
4996
|
+
showEmailPanel && /* @__PURE__ */ React12.createElement(React12.Fragment, null, !emailValid && /* @__PURE__ */ React12.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__ */ React12.createElement("div", { className: "ai-chat-email-input-container" }, /* @__PURE__ */ React12.createElement(
|
|
4997
|
+
"input",
|
|
4998
|
+
{
|
|
4999
|
+
type: "email",
|
|
5000
|
+
name: "email",
|
|
5001
|
+
id: "email",
|
|
5002
|
+
className: emailValid ? emailInputSet ? "ai-chat-email-input-set" : "ai-chat-email-input" : "ai-chat-email-input-invalid",
|
|
5003
|
+
placeholder: customerEmailCapturePlaceholder,
|
|
5004
|
+
value: emailInput,
|
|
5005
|
+
onChange: (e) => {
|
|
5006
|
+
const newEmail = e.target.value;
|
|
5007
|
+
setEmailInput(newEmail);
|
|
5008
|
+
if (!emailInputSet) {
|
|
5009
|
+
if (customerEmailCaptureMode === "REQUIRED" && newEmail !== "") {
|
|
5010
|
+
setEmailValid(isEmailAddress(newEmail));
|
|
5011
|
+
} else {
|
|
5012
|
+
setEmailValid(true);
|
|
5013
|
+
}
|
|
5014
|
+
}
|
|
5015
|
+
},
|
|
5016
|
+
onBlur: () => {
|
|
5017
|
+
if (emailInput && isEmailAddress(emailInput) && !emailInputSet) {
|
|
5018
|
+
setEmailInputSet(true);
|
|
5019
|
+
setEmailValid(true);
|
|
5020
|
+
interactionClicked("", "emailcapture", emailInput);
|
|
5021
|
+
if (CTAClickedButNoEmail) {
|
|
5022
|
+
sendCallToActionEmail(emailInput);
|
|
5023
|
+
setCTAClickedButNoEmail(false);
|
|
5024
|
+
}
|
|
5025
|
+
if (emailClickedButNoEmail) {
|
|
5026
|
+
handleSendEmail(emailInput, emailInput);
|
|
5027
|
+
setEmailClickedButNoEmail(false);
|
|
5028
|
+
}
|
|
5029
|
+
} else if (customerEmailCaptureMode === "REQUIRED" && emailInput !== "") {
|
|
5030
|
+
setEmailValid(isEmailAddress(emailInput));
|
|
5031
|
+
}
|
|
5032
|
+
},
|
|
5033
|
+
onKeyDown: (e) => {
|
|
5034
|
+
if (e.key === "Enter") {
|
|
5035
|
+
if (isEmailAddress(emailInput)) {
|
|
5036
|
+
setEmailInputSet(true);
|
|
5037
|
+
setEmailValid(true);
|
|
5038
|
+
interactionClicked("", "emailcapture", emailInput);
|
|
5039
|
+
if (CTAClickedButNoEmail) {
|
|
5040
|
+
sendCallToActionEmail(emailInput);
|
|
5041
|
+
setCTAClickedButNoEmail(false);
|
|
5042
|
+
}
|
|
5043
|
+
if (emailClickedButNoEmail) {
|
|
5044
|
+
handleSendEmail(emailInput, emailInput);
|
|
5045
|
+
setEmailClickedButNoEmail(false);
|
|
5046
|
+
}
|
|
5047
|
+
} else {
|
|
5048
|
+
setEmailValid(false);
|
|
5049
|
+
}
|
|
5050
|
+
}
|
|
5051
|
+
},
|
|
5052
|
+
disabled: false
|
|
5053
|
+
}
|
|
5054
|
+
), emailInputSet && /* @__PURE__ */ React12.createElement(
|
|
4435
5055
|
"button",
|
|
4436
5056
|
{
|
|
4437
|
-
className: "ai-chat-
|
|
4438
|
-
onClick: () =>
|
|
4439
|
-
|
|
4440
|
-
|
|
5057
|
+
className: "ai-chat-email-edit-button",
|
|
5058
|
+
onClick: () => {
|
|
5059
|
+
setEmailInputSet(false);
|
|
5060
|
+
setEmailValid(true);
|
|
5061
|
+
},
|
|
5062
|
+
title: "Edit email"
|
|
4441
5063
|
},
|
|
4442
|
-
|
|
4443
|
-
)))
|
|
4444
|
-
|
|
4445
|
-
|
|
4446
|
-
|
|
4447
|
-
|
|
4448
|
-
|
|
4449
|
-
|
|
4450
|
-
|
|
4451
|
-
|
|
4452
|
-
|
|
4453
|
-
|
|
4454
|
-
|
|
4455
|
-
|
|
4456
|
-
|
|
4457
|
-
|
|
4458
|
-
|
|
4459
|
-
|
|
4460
|
-
|
|
4461
|
-
|
|
4462
|
-
|
|
4463
|
-
|
|
4464
|
-
|
|
4465
|
-
{
|
|
4466
|
-
|
|
4467
|
-
|
|
4468
|
-
|
|
4469
|
-
|
|
4470
|
-
|
|
4471
|
-
|
|
4472
|
-
|
|
4473
|
-
|
|
4474
|
-
|
|
4475
|
-
|
|
4476
|
-
|
|
4477
|
-
|
|
4478
|
-
|
|
4479
|
-
|
|
4480
|
-
}
|
|
4481
|
-
), showPoweredBy && /* @__PURE__ */ React11.createElement("div", { className: "ai-chat-panel__footer" }, mcpServers && mcpServers.length > 0 && /* @__PURE__ */ React11.createElement("div", { className: "ai-chat-tools-status" }, /* @__PURE__ */ React11.createElement(
|
|
4482
|
-
"span",
|
|
4483
|
-
{
|
|
4484
|
-
className: `ai-chat-tools-status__dot ${toolsLoading ? "loading" : toolsFetchError ? "error" : "ready"}`
|
|
4485
|
-
}
|
|
4486
|
-
), /* @__PURE__ */ React11.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__ */ React11.createElement("div", { className: "ai-chat-powered-by" }, /* @__PURE__ */ React11.createElement("span", null, "brought to you by"), /* @__PURE__ */ React11.createElement("a", { href: "https://llmasaservice.io", target: "_blank", rel: "noopener noreferrer" }, /* @__PURE__ */ React11.createElement(LLMAsAServiceLogo, null), /* @__PURE__ */ React11.createElement("span", null, "llmasaservice.io")))));
|
|
5064
|
+
"\u270E"
|
|
5065
|
+
))),
|
|
5066
|
+
/* @__PURE__ */ React12.createElement(
|
|
5067
|
+
ChatInput,
|
|
5068
|
+
{
|
|
5069
|
+
placeholder,
|
|
5070
|
+
idle,
|
|
5071
|
+
onSubmit: continueChat,
|
|
5072
|
+
onStop: handleStop,
|
|
5073
|
+
agentOptions,
|
|
5074
|
+
currentAgentId,
|
|
5075
|
+
onAgentChange,
|
|
5076
|
+
agentsLoading,
|
|
5077
|
+
currentAgentLabel: currentAgentLabel || void 0,
|
|
5078
|
+
currentAgentAvatarUrl: currentAgentAvatarUrl || void 0,
|
|
5079
|
+
contextSections,
|
|
5080
|
+
totalContextTokens,
|
|
5081
|
+
maxContextTokens,
|
|
5082
|
+
enableContextDetailView,
|
|
5083
|
+
disabledSectionIds,
|
|
5084
|
+
onToggleSection: handleToggleSection
|
|
5085
|
+
}
|
|
5086
|
+
),
|
|
5087
|
+
showPoweredBy && /* @__PURE__ */ React12.createElement("div", { className: "ai-chat-panel__footer" }, mcpServers && mcpServers.length > 0 && /* @__PURE__ */ React12.createElement("div", { className: "ai-chat-tools-status" }, /* @__PURE__ */ React12.createElement(
|
|
5088
|
+
"span",
|
|
5089
|
+
{
|
|
5090
|
+
className: `ai-chat-tools-status__dot ${toolsLoading ? "loading" : toolsFetchError ? "error" : "ready"}`
|
|
5091
|
+
}
|
|
5092
|
+
), /* @__PURE__ */ React12.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__ */ React12.createElement("div", { className: "ai-chat-powered-by" }, /* @__PURE__ */ React12.createElement("span", null, "brought to you by"), /* @__PURE__ */ React12.createElement("a", { href: "https://llmasaservice.io", target: "_blank", rel: "noopener noreferrer" }, /* @__PURE__ */ React12.createElement(LLMAsAServiceLogo, null), /* @__PURE__ */ React12.createElement("span", null, "llmasaservice.io")))),
|
|
5093
|
+
/* @__PURE__ */ React12.createElement(
|
|
5094
|
+
ToolInfoModal_default2,
|
|
5095
|
+
{
|
|
5096
|
+
isOpen: isToolInfoModalOpen,
|
|
5097
|
+
onClose: () => setIsToolInfoModalOpen(false),
|
|
5098
|
+
data: toolInfoData
|
|
5099
|
+
}
|
|
5100
|
+
)
|
|
5101
|
+
);
|
|
4487
5102
|
};
|
|
4488
|
-
var AIChatPanel_default =
|
|
5103
|
+
var AIChatPanel_default = React12.memo(AIChatPanel);
|
|
4489
5104
|
|
|
4490
5105
|
// src/hooks/useAgentRegistry.ts
|
|
4491
5106
|
import { useState as useState7, useEffect as useEffect8, useCallback as useCallback3, useMemo as useMemo3 } from "react";
|
|
@@ -4687,15 +5302,15 @@ function extractAgentNameFromMessage(message) {
|
|
|
4687
5302
|
}
|
|
4688
5303
|
|
|
4689
5304
|
// src/AIAgentPanel.tsx
|
|
4690
|
-
var SearchIcon2 = () => /* @__PURE__ */
|
|
4691
|
-
var PlusIcon = () => /* @__PURE__ */
|
|
4692
|
-
var ChevronLeftIcon = () => /* @__PURE__ */
|
|
4693
|
-
var ChevronRightIcon = () => /* @__PURE__ */
|
|
4694
|
-
var MessageIcon = () => /* @__PURE__ */
|
|
4695
|
-
var CloseIcon2 = () => /* @__PURE__ */
|
|
4696
|
-
var LoadingDotIcon = () => /* @__PURE__ */
|
|
4697
|
-
var SidebarIcon = () => /* @__PURE__ */
|
|
4698
|
-
var SparkleIcon = () => /* @__PURE__ */
|
|
5305
|
+
var SearchIcon2 = () => /* @__PURE__ */ React13.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React13.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" }));
|
|
5306
|
+
var PlusIcon = () => /* @__PURE__ */ React13.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React13.createElement("path", { d: "M8 3.333v9.334M3.333 8h9.334", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }));
|
|
5307
|
+
var ChevronLeftIcon = () => /* @__PURE__ */ React13.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React13.createElement("path", { d: "M10 12L6 8l4-4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }));
|
|
5308
|
+
var ChevronRightIcon = () => /* @__PURE__ */ React13.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React13.createElement("path", { d: "M6 12l4-4-4-4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }));
|
|
5309
|
+
var MessageIcon = () => /* @__PURE__ */ React13.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React13.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" }));
|
|
5310
|
+
var CloseIcon2 = () => /* @__PURE__ */ React13.createElement("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React13.createElement("path", { d: "M9 3L3 9M3 3l6 6", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }));
|
|
5311
|
+
var LoadingDotIcon = () => /* @__PURE__ */ React13.createElement("span", { className: "ai-agent-panel__loading-dot" });
|
|
5312
|
+
var SidebarIcon = () => /* @__PURE__ */ React13.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React13.createElement("rect", { x: "2", y: "2", width: "12", height: "12", rx: "2", stroke: "currentColor", strokeWidth: "1.5" }), /* @__PURE__ */ React13.createElement("path", { d: "M6 2v12", stroke: "currentColor", strokeWidth: "1.5" }));
|
|
5313
|
+
var SparkleIcon = () => /* @__PURE__ */ React13.createElement("svg", { width: "14", height: "14", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React13.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__ */ React13.createElement("circle", { cx: "8", cy: "8", r: "2", fill: "currentColor" }));
|
|
4699
5314
|
var normalizeConversationListPayload = (payload) => {
|
|
4700
5315
|
if (!payload) return [];
|
|
4701
5316
|
const conversations = Array.isArray(payload) ? payload : payload.conversations || [];
|
|
@@ -4817,10 +5432,28 @@ var ChatPanelWrapper = ({
|
|
|
4817
5432
|
totalContextTokens,
|
|
4818
5433
|
maxContextTokens,
|
|
4819
5434
|
enableContextDetailView,
|
|
5435
|
+
disabledSectionIds,
|
|
5436
|
+
onToggleSection,
|
|
4820
5437
|
onConversationCreated,
|
|
4821
|
-
conversationInitialPrompt
|
|
5438
|
+
conversationInitialPrompt,
|
|
5439
|
+
// New props from ChatPanel port
|
|
5440
|
+
cssUrl,
|
|
5441
|
+
markdownClass,
|
|
5442
|
+
width,
|
|
5443
|
+
height,
|
|
5444
|
+
scrollToEnd,
|
|
5445
|
+
prismStyle,
|
|
5446
|
+
showSaveButton,
|
|
5447
|
+
showEmailButton,
|
|
5448
|
+
messages,
|
|
5449
|
+
showCallToAction,
|
|
5450
|
+
callToActionButtonText,
|
|
5451
|
+
callToActionEmailAddress,
|
|
5452
|
+
callToActionEmailSubject,
|
|
5453
|
+
customerEmailCaptureMode,
|
|
5454
|
+
customerEmailCapturePlaceholder
|
|
4822
5455
|
}) => {
|
|
4823
|
-
var _a, _b;
|
|
5456
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
|
|
4824
5457
|
const convAgentProfile = getAgent(activeConv.agentId);
|
|
4825
5458
|
const convAgentMetadata = convAgentProfile == null ? void 0 : convAgentProfile.metadata;
|
|
4826
5459
|
const isVisible = currentConversationId === activeConv.conversationId;
|
|
@@ -4856,13 +5489,13 @@ var ChatPanelWrapper = ({
|
|
|
4856
5489
|
}, [convAgentProfile == null ? void 0 : convAgentProfile.mcpServers]);
|
|
4857
5490
|
const effectiveInitialPrompt = conversationInitialPrompt || initialPrompt;
|
|
4858
5491
|
if (!convAgentMetadata) return null;
|
|
4859
|
-
return /* @__PURE__ */
|
|
5492
|
+
return /* @__PURE__ */ React13.createElement(
|
|
4860
5493
|
"div",
|
|
4861
5494
|
{
|
|
4862
5495
|
className: "ai-agent-panel__chat-wrapper",
|
|
4863
5496
|
style: { display: isVisible ? "flex" : "none" }
|
|
4864
5497
|
},
|
|
4865
|
-
/* @__PURE__ */
|
|
5498
|
+
/* @__PURE__ */ React13.createElement(
|
|
4866
5499
|
AIChatPanel_default,
|
|
4867
5500
|
{
|
|
4868
5501
|
project_id: convAgentMetadata.projectId,
|
|
@@ -4887,7 +5520,7 @@ var ChatPanelWrapper = ({
|
|
|
4887
5520
|
customer: effectiveCustomer,
|
|
4888
5521
|
showPoweredBy,
|
|
4889
5522
|
showNewConversationButton: false,
|
|
4890
|
-
createConversationOnFirstChat: (_b =
|
|
5523
|
+
createConversationOnFirstChat: (_b = convAgentProfile == null ? void 0 : convAgentProfile.createConversationOnFirstChat) != null ? _b : true,
|
|
4891
5524
|
mcpServers,
|
|
4892
5525
|
actions,
|
|
4893
5526
|
followOnQuestions: effectiveFollowOnQuestions,
|
|
@@ -4902,15 +5535,33 @@ var ChatPanelWrapper = ({
|
|
|
4902
5535
|
totalContextTokens,
|
|
4903
5536
|
maxContextTokens,
|
|
4904
5537
|
enableContextDetailView,
|
|
4905
|
-
|
|
5538
|
+
disabledSectionIds,
|
|
5539
|
+
onToggleSection,
|
|
5540
|
+
onConversationCreated: conversationCreatedCallback,
|
|
5541
|
+
cssUrl,
|
|
5542
|
+
markdownClass,
|
|
5543
|
+
width,
|
|
5544
|
+
height,
|
|
5545
|
+
scrollToEnd: scrollToEnd != null ? scrollToEnd : convAgentMetadata.displayAutoScroll,
|
|
5546
|
+
prismStyle,
|
|
5547
|
+
showSaveButton: (_c = showSaveButton != null ? showSaveButton : convAgentMetadata.displayShowSaveButton) != null ? _c : true,
|
|
5548
|
+
showEmailButton: (_d = showEmailButton != null ? showEmailButton : convAgentMetadata.displayShowEmailButton) != null ? _d : true,
|
|
5549
|
+
messages,
|
|
5550
|
+
showCallToAction: (_e = showCallToAction != null ? showCallToAction : convAgentMetadata.displayShowCallToAction) != null ? _e : false,
|
|
5551
|
+
callToActionButtonText: (_f = callToActionButtonText != null ? callToActionButtonText : convAgentMetadata.displayCallToActionButtonText) != null ? _f : "Submit",
|
|
5552
|
+
callToActionEmailAddress: (_g = callToActionEmailAddress != null ? callToActionEmailAddress : convAgentMetadata.displayCallToActionEmailAddress) != null ? _g : "",
|
|
5553
|
+
callToActionEmailSubject: (_h = callToActionEmailSubject != null ? callToActionEmailSubject : convAgentMetadata.displayCallToActionEmailSubject) != null ? _h : "Agent CTA submitted",
|
|
5554
|
+
customerEmailCaptureMode: (_i = customerEmailCaptureMode != null ? customerEmailCaptureMode : convAgentMetadata == null ? void 0 : convAgentMetadata.customerEmailCaptureMode) != null ? _i : "HIDE",
|
|
5555
|
+
customerEmailCapturePlaceholder: (_j = customerEmailCapturePlaceholder != null ? customerEmailCapturePlaceholder : convAgentMetadata == null ? void 0 : convAgentMetadata.customerEmailCapturePlaceholder) != null ? _j : "Please enter your email..."
|
|
4906
5556
|
}
|
|
4907
5557
|
)
|
|
4908
5558
|
);
|
|
4909
5559
|
};
|
|
4910
5560
|
ChatPanelWrapper.displayName = "ChatPanelWrapper";
|
|
4911
|
-
var AIAgentPanel =
|
|
5561
|
+
var AIAgentPanel = React13.forwardRef(({
|
|
4912
5562
|
agents,
|
|
4913
5563
|
defaultAgent,
|
|
5564
|
+
selectedAgent,
|
|
4914
5565
|
customerId,
|
|
4915
5566
|
apiKey,
|
|
4916
5567
|
context,
|
|
@@ -4947,7 +5598,23 @@ var AIAgentPanel = React12.forwardRef(({
|
|
|
4947
5598
|
followOnQuestions = [],
|
|
4948
5599
|
followOnPrompt = "",
|
|
4949
5600
|
historyListLimit = 50,
|
|
4950
|
-
showConversationHistory = true
|
|
5601
|
+
showConversationHistory = true,
|
|
5602
|
+
// New props from ChatPanel port
|
|
5603
|
+
cssUrl,
|
|
5604
|
+
markdownClass,
|
|
5605
|
+
width,
|
|
5606
|
+
height,
|
|
5607
|
+
scrollToEnd,
|
|
5608
|
+
prismStyle,
|
|
5609
|
+
showSaveButton,
|
|
5610
|
+
showEmailButton,
|
|
5611
|
+
messages,
|
|
5612
|
+
showCallToAction,
|
|
5613
|
+
callToActionButtonText,
|
|
5614
|
+
callToActionEmailAddress,
|
|
5615
|
+
callToActionEmailSubject,
|
|
5616
|
+
customerEmailCaptureMode,
|
|
5617
|
+
customerEmailCapturePlaceholder
|
|
4951
5618
|
}, ref) => {
|
|
4952
5619
|
var _a, _b, _c, _d;
|
|
4953
5620
|
const [isCollapsed, setIsCollapsed] = useState8(collapsible && defaultCollapsed);
|
|
@@ -4962,9 +5629,9 @@ var AIAgentPanel = React12.forwardRef(({
|
|
|
4962
5629
|
if (typeof window !== "undefined") {
|
|
4963
5630
|
const savedWidth = localStorage.getItem("ai-agent-panel-width");
|
|
4964
5631
|
if (savedWidth) {
|
|
4965
|
-
const
|
|
4966
|
-
if (
|
|
4967
|
-
return
|
|
5632
|
+
const width2 = parseInt(savedWidth, 10);
|
|
5633
|
+
if (width2 >= minWidth && width2 <= maxWidth) {
|
|
5634
|
+
return width2;
|
|
4968
5635
|
}
|
|
4969
5636
|
}
|
|
4970
5637
|
}
|
|
@@ -4998,6 +5665,28 @@ var AIAgentPanel = React12.forwardRef(({
|
|
|
4998
5665
|
const [currentAgentId, setCurrentAgentId] = useState8(
|
|
4999
5666
|
defaultAgent || agentIds[0] || ""
|
|
5000
5667
|
);
|
|
5668
|
+
useEffect9(() => {
|
|
5669
|
+
if (selectedAgent && selectedAgent !== currentAgentId) {
|
|
5670
|
+
const oldAgentId = currentAgentId;
|
|
5671
|
+
setCurrentAgentId(selectedAgent);
|
|
5672
|
+
if (onAgentSwitch) {
|
|
5673
|
+
onAgentSwitch(oldAgentId, selectedAgent);
|
|
5674
|
+
}
|
|
5675
|
+
if (currentConversationIdRef.current) {
|
|
5676
|
+
setActiveConversations((prev) => {
|
|
5677
|
+
const existing = prev.get(currentConversationIdRef.current);
|
|
5678
|
+
if (existing) {
|
|
5679
|
+
const next = new Map(prev);
|
|
5680
|
+
next.set(currentConversationIdRef.current, __spreadProps(__spreadValues({}, existing), {
|
|
5681
|
+
agentId: selectedAgent
|
|
5682
|
+
}));
|
|
5683
|
+
return next;
|
|
5684
|
+
}
|
|
5685
|
+
return prev;
|
|
5686
|
+
});
|
|
5687
|
+
}
|
|
5688
|
+
}
|
|
5689
|
+
}, [selectedAgent]);
|
|
5001
5690
|
const [apiConversations, setApiConversations] = useState8([]);
|
|
5002
5691
|
const [conversationsLoading, setConversationsLoading] = useState8(false);
|
|
5003
5692
|
const [conversationsError, setConversationsError] = useState8(null);
|
|
@@ -5014,6 +5703,7 @@ var AIAgentPanel = React12.forwardRef(({
|
|
|
5014
5703
|
"This Month": false,
|
|
5015
5704
|
"Older": false
|
|
5016
5705
|
});
|
|
5706
|
+
const [disabledContextSections, setDisabledContextSections] = useState8(/* @__PURE__ */ new Map());
|
|
5017
5707
|
const {
|
|
5018
5708
|
agents: agentProfiles,
|
|
5019
5709
|
isLoading: agentsLoading,
|
|
@@ -5030,7 +5720,7 @@ var AIAgentPanel = React12.forwardRef(({
|
|
|
5030
5720
|
activeConversationsRef.current = activeConversations;
|
|
5031
5721
|
const currentConversationIdRef = useRef6(currentConversationId);
|
|
5032
5722
|
currentConversationIdRef.current = currentConversationId;
|
|
5033
|
-
|
|
5723
|
+
React13.useImperativeHandle(ref, () => ({
|
|
5034
5724
|
startNewConversation: (prompt, agent) => {
|
|
5035
5725
|
const targetAgent = agent || currentAgentId;
|
|
5036
5726
|
const tempId = `new-${Date.now()}`;
|
|
@@ -5157,13 +5847,8 @@ var AIAgentPanel = React12.forwardRef(({
|
|
|
5157
5847
|
fetchInProgressRef.current = true;
|
|
5158
5848
|
setConversationsLoading(true);
|
|
5159
5849
|
setConversationsError(null);
|
|
5160
|
-
console.log("projectId", projectId);
|
|
5161
|
-
console.log("customerId", customerId);
|
|
5162
|
-
console.log("apiKey", apiKey);
|
|
5163
5850
|
try {
|
|
5164
|
-
console.log("fetchConversations - customerId:", customerId);
|
|
5165
5851
|
const url2 = `https://api.llmasaservice.io/conversations?customer_id=${customerId}`;
|
|
5166
|
-
console.log("fetchConversations - URL:", url2);
|
|
5167
5852
|
const response = yield fetch(url2, {
|
|
5168
5853
|
signal,
|
|
5169
5854
|
headers: {
|
|
@@ -5547,8 +6232,21 @@ var AIAgentPanel = React12.forwardRef(({
|
|
|
5547
6232
|
});
|
|
5548
6233
|
}
|
|
5549
6234
|
}, [pageContextSections, currentAgentId, agentIds, getAgent, localOverrides]);
|
|
6235
|
+
const currentDisabledSections = useMemo4(() => {
|
|
6236
|
+
return currentConversationId ? disabledContextSections.get(currentConversationId) || /* @__PURE__ */ new Set() : /* @__PURE__ */ new Set();
|
|
6237
|
+
}, [currentConversationId, disabledContextSections]);
|
|
6238
|
+
const filteredContext = useMemo4(() => {
|
|
6239
|
+
const enabledSections = mergedContext.sections.filter(
|
|
6240
|
+
(section) => !currentDisabledSections.has(section.id)
|
|
6241
|
+
);
|
|
6242
|
+
const totalTokens = enabledSections.reduce((sum, s) => sum + (s.tokens || 0), 0);
|
|
6243
|
+
return {
|
|
6244
|
+
sections: enabledSections,
|
|
6245
|
+
totalTokens
|
|
6246
|
+
};
|
|
6247
|
+
}, [mergedContext.sections, currentDisabledSections]);
|
|
5550
6248
|
const chatPanelData = useMemo4(() => {
|
|
5551
|
-
const contextData =
|
|
6249
|
+
const contextData = filteredContext.sections.map((section) => ({
|
|
5552
6250
|
key: section.id,
|
|
5553
6251
|
data: JSON.stringify(section.data)
|
|
5554
6252
|
}));
|
|
@@ -5562,7 +6260,7 @@ var AIAgentPanel = React12.forwardRef(({
|
|
|
5562
6260
|
}
|
|
5563
6261
|
}
|
|
5564
6262
|
return [...data, ...contextData];
|
|
5565
|
-
}, [data,
|
|
6263
|
+
}, [data, filteredContext.sections, buildAgentAwarenessInstructions, currentAgentId, enableAgentSuggestions]);
|
|
5566
6264
|
const handleAgentSwitch = useCallback4(
|
|
5567
6265
|
(newAgentId) => {
|
|
5568
6266
|
const oldAgentId = currentAgentId;
|
|
@@ -5693,6 +6391,21 @@ var AIAgentPanel = React12.forwardRef(({
|
|
|
5693
6391
|
setSuggestedAgent(null);
|
|
5694
6392
|
setHandoffSource("agent");
|
|
5695
6393
|
}, []);
|
|
6394
|
+
const handleContextSectionToggle = useCallback4((sectionId, enabled) => {
|
|
6395
|
+
if (!currentConversationId) return;
|
|
6396
|
+
setDisabledContextSections((prev) => {
|
|
6397
|
+
const next = new Map(prev);
|
|
6398
|
+
const conversationDisabled = next.get(currentConversationId) || /* @__PURE__ */ new Set();
|
|
6399
|
+
const nextDisabled = new Set(conversationDisabled);
|
|
6400
|
+
if (enabled) {
|
|
6401
|
+
nextDisabled.delete(sectionId);
|
|
6402
|
+
} else {
|
|
6403
|
+
nextDisabled.add(sectionId);
|
|
6404
|
+
}
|
|
6405
|
+
next.set(currentConversationId, nextDisabled);
|
|
6406
|
+
return next;
|
|
6407
|
+
});
|
|
6408
|
+
}, [currentConversationId]);
|
|
5696
6409
|
const handleConversationCreated = useCallback4((tempId, realId) => {
|
|
5697
6410
|
console.log("Conversation created:", tempId, "->", realId);
|
|
5698
6411
|
setActiveConversations((prev) => {
|
|
@@ -5734,7 +6447,7 @@ var AIAgentPanel = React12.forwardRef(({
|
|
|
5734
6447
|
!showConversationHistory ? "ai-agent-panel--no-history" : ""
|
|
5735
6448
|
].filter(Boolean).join(" ");
|
|
5736
6449
|
if (collapsible && isCollapsed) {
|
|
5737
|
-
return /* @__PURE__ */
|
|
6450
|
+
return /* @__PURE__ */ React13.createElement("div", { className: panelClasses, ref: panelRef }, /* @__PURE__ */ React13.createElement(
|
|
5738
6451
|
"div",
|
|
5739
6452
|
{
|
|
5740
6453
|
className: "ai-agent-panel__collapsed-bar",
|
|
@@ -5745,9 +6458,9 @@ var AIAgentPanel = React12.forwardRef(({
|
|
|
5745
6458
|
},
|
|
5746
6459
|
title: "Click to expand"
|
|
5747
6460
|
},
|
|
5748
|
-
/* @__PURE__ */
|
|
5749
|
-
/* @__PURE__ */
|
|
5750
|
-
showConversationHistory && /* @__PURE__ */
|
|
6461
|
+
/* @__PURE__ */ React13.createElement(Tooltip, { content: "Expand Panel", side: "left" }, /* @__PURE__ */ React13.createElement(Button, { variant: "ghost", size: "icon", onClick: toggleCollapse }, position === "right" ? /* @__PURE__ */ React13.createElement(ChevronLeftIcon, null) : /* @__PURE__ */ React13.createElement(ChevronRightIcon, null))),
|
|
6462
|
+
/* @__PURE__ */ React13.createElement("div", { className: "ai-agent-panel__collapsed-divider" }),
|
|
6463
|
+
showConversationHistory && /* @__PURE__ */ React13.createElement(Tooltip, { content: "Search", side: "left" }, /* @__PURE__ */ React13.createElement(
|
|
5751
6464
|
Button,
|
|
5752
6465
|
{
|
|
5753
6466
|
variant: "ghost",
|
|
@@ -5757,9 +6470,9 @@ var AIAgentPanel = React12.forwardRef(({
|
|
|
5757
6470
|
setShowSearch(true);
|
|
5758
6471
|
}
|
|
5759
6472
|
},
|
|
5760
|
-
/* @__PURE__ */
|
|
6473
|
+
/* @__PURE__ */ React13.createElement(SearchIcon2, null)
|
|
5761
6474
|
)),
|
|
5762
|
-
/* @__PURE__ */
|
|
6475
|
+
/* @__PURE__ */ React13.createElement(Tooltip, { content: "New Chat", side: "left" }, /* @__PURE__ */ React13.createElement(
|
|
5763
6476
|
Button,
|
|
5764
6477
|
{
|
|
5765
6478
|
variant: "ghost",
|
|
@@ -5769,15 +6482,15 @@ var AIAgentPanel = React12.forwardRef(({
|
|
|
5769
6482
|
handleNewConversation();
|
|
5770
6483
|
}
|
|
5771
6484
|
},
|
|
5772
|
-
/* @__PURE__ */
|
|
6485
|
+
/* @__PURE__ */ React13.createElement(PlusIcon, null)
|
|
5773
6486
|
)),
|
|
5774
|
-
/* @__PURE__ */
|
|
6487
|
+
/* @__PURE__ */ React13.createElement("div", { className: "ai-agent-panel__collapsed-divider" }),
|
|
5775
6488
|
agentList.map((agent) => {
|
|
5776
6489
|
const activeConvForAgent = activeConversationsList.find(
|
|
5777
6490
|
(conv) => conv.agentId === agent.id
|
|
5778
6491
|
);
|
|
5779
6492
|
const hasActiveConversation = !!activeConvForAgent;
|
|
5780
|
-
return /* @__PURE__ */
|
|
6493
|
+
return /* @__PURE__ */ React13.createElement(Tooltip, { key: agent.id, content: agent.name, side: "left" }, /* @__PURE__ */ React13.createElement(
|
|
5781
6494
|
Button,
|
|
5782
6495
|
{
|
|
5783
6496
|
variant: agent.id === currentAgentId ? "secondary" : "ghost",
|
|
@@ -5811,7 +6524,7 @@ var AIAgentPanel = React12.forwardRef(({
|
|
|
5811
6524
|
},
|
|
5812
6525
|
className: `ai-agent-panel__agent-icon ${hasActiveConversation ? "ai-agent-panel__agent-icon--active" : ""}`
|
|
5813
6526
|
},
|
|
5814
|
-
agent.avatarUrl ? /* @__PURE__ */
|
|
6527
|
+
agent.avatarUrl ? /* @__PURE__ */ React13.createElement(
|
|
5815
6528
|
"img",
|
|
5816
6529
|
{
|
|
5817
6530
|
src: agent.avatarUrl,
|
|
@@ -5819,20 +6532,20 @@ var AIAgentPanel = React12.forwardRef(({
|
|
|
5819
6532
|
className: "ai-agent-panel__agent-avatar"
|
|
5820
6533
|
}
|
|
5821
6534
|
) : agent.name.charAt(0).toUpperCase(),
|
|
5822
|
-
hasActiveConversation && /* @__PURE__ */
|
|
6535
|
+
hasActiveConversation && /* @__PURE__ */ React13.createElement("span", { className: "ai-agent-panel__agent-active-indicator" })
|
|
5823
6536
|
));
|
|
5824
6537
|
}),
|
|
5825
|
-
/* @__PURE__ */
|
|
6538
|
+
/* @__PURE__ */ React13.createElement("div", { className: "ai-agent-panel__collapsed-spacer" })
|
|
5826
6539
|
));
|
|
5827
6540
|
}
|
|
5828
|
-
return /* @__PURE__ */
|
|
6541
|
+
return /* @__PURE__ */ React13.createElement(
|
|
5829
6542
|
"div",
|
|
5830
6543
|
{
|
|
5831
6544
|
className: panelClasses,
|
|
5832
6545
|
ref: panelRef,
|
|
5833
6546
|
style: { width: `${panelWidth}px` }
|
|
5834
6547
|
},
|
|
5835
|
-
/* @__PURE__ */
|
|
6548
|
+
/* @__PURE__ */ React13.createElement(
|
|
5836
6549
|
"div",
|
|
5837
6550
|
{
|
|
5838
6551
|
ref: resizeRef,
|
|
@@ -5844,9 +6557,9 @@ var AIAgentPanel = React12.forwardRef(({
|
|
|
5844
6557
|
tabIndex: 0
|
|
5845
6558
|
}
|
|
5846
6559
|
),
|
|
5847
|
-
showConversationHistory && /* @__PURE__ */
|
|
6560
|
+
showConversationHistory && /* @__PURE__ */ React13.createElement("div", { className: `ai-agent-panel__sidebar ${isHistoryCollapsed ? "ai-agent-panel__sidebar--collapsed" : ""}` }, isHistoryCollapsed ? (
|
|
5848
6561
|
// Collapsed history bar
|
|
5849
|
-
/* @__PURE__ */
|
|
6562
|
+
/* @__PURE__ */ React13.createElement(
|
|
5850
6563
|
"div",
|
|
5851
6564
|
{
|
|
5852
6565
|
className: "ai-agent-panel__history-collapsed-bar",
|
|
@@ -5857,32 +6570,32 @@ var AIAgentPanel = React12.forwardRef(({
|
|
|
5857
6570
|
},
|
|
5858
6571
|
title: "Click to expand history"
|
|
5859
6572
|
},
|
|
5860
|
-
/* @__PURE__ */
|
|
6573
|
+
/* @__PURE__ */ React13.createElement(Tooltip, { content: "Expand History", side: sidebarPosition === "left" ? "right" : "left" }, /* @__PURE__ */ React13.createElement(
|
|
5861
6574
|
Button,
|
|
5862
6575
|
{
|
|
5863
6576
|
variant: "ghost",
|
|
5864
6577
|
size: "icon",
|
|
5865
6578
|
onClick: toggleHistoryCollapse
|
|
5866
6579
|
},
|
|
5867
|
-
/* @__PURE__ */
|
|
6580
|
+
/* @__PURE__ */ React13.createElement(ChevronRightIcon, null)
|
|
5868
6581
|
)),
|
|
5869
|
-
/* @__PURE__ */
|
|
5870
|
-
/* @__PURE__ */
|
|
6582
|
+
/* @__PURE__ */ React13.createElement("div", { className: "ai-agent-panel__collapsed-divider" }),
|
|
6583
|
+
/* @__PURE__ */ React13.createElement(Tooltip, { content: "New Chat", side: sidebarPosition === "left" ? "right" : "left" }, /* @__PURE__ */ React13.createElement(
|
|
5871
6584
|
Button,
|
|
5872
6585
|
{
|
|
5873
6586
|
variant: "ghost",
|
|
5874
6587
|
size: "icon",
|
|
5875
6588
|
onClick: handleNewConversation
|
|
5876
6589
|
},
|
|
5877
|
-
/* @__PURE__ */
|
|
6590
|
+
/* @__PURE__ */ React13.createElement(PlusIcon, null)
|
|
5878
6591
|
)),
|
|
5879
|
-
/* @__PURE__ */
|
|
6592
|
+
/* @__PURE__ */ React13.createElement("div", { className: "ai-agent-panel__collapsed-divider" }),
|
|
5880
6593
|
agentList.map((agent) => {
|
|
5881
6594
|
const activeConvForAgent = activeConversationsList.find(
|
|
5882
6595
|
(conv) => conv.agentId === agent.id
|
|
5883
6596
|
);
|
|
5884
6597
|
const hasActiveConversation = !!activeConvForAgent;
|
|
5885
|
-
return /* @__PURE__ */
|
|
6598
|
+
return /* @__PURE__ */ React13.createElement(Tooltip, { key: agent.id, content: agent.name, side: sidebarPosition === "left" ? "right" : "left" }, /* @__PURE__ */ React13.createElement(
|
|
5886
6599
|
Button,
|
|
5887
6600
|
{
|
|
5888
6601
|
variant: agent.id === currentAgentId ? "secondary" : "ghost",
|
|
@@ -5915,7 +6628,7 @@ var AIAgentPanel = React12.forwardRef(({
|
|
|
5915
6628
|
},
|
|
5916
6629
|
className: `ai-agent-panel__agent-icon ${hasActiveConversation ? "ai-agent-panel__agent-icon--active" : ""}`
|
|
5917
6630
|
},
|
|
5918
|
-
agent.avatarUrl ? /* @__PURE__ */
|
|
6631
|
+
agent.avatarUrl ? /* @__PURE__ */ React13.createElement(
|
|
5919
6632
|
"img",
|
|
5920
6633
|
{
|
|
5921
6634
|
src: agent.avatarUrl,
|
|
@@ -5923,40 +6636,40 @@ var AIAgentPanel = React12.forwardRef(({
|
|
|
5923
6636
|
className: "ai-agent-panel__agent-avatar"
|
|
5924
6637
|
}
|
|
5925
6638
|
) : agent.name.charAt(0).toUpperCase(),
|
|
5926
|
-
hasActiveConversation && /* @__PURE__ */
|
|
6639
|
+
hasActiveConversation && /* @__PURE__ */ React13.createElement("span", { className: "ai-agent-panel__agent-active-indicator" })
|
|
5927
6640
|
));
|
|
5928
6641
|
}),
|
|
5929
|
-
/* @__PURE__ */
|
|
6642
|
+
/* @__PURE__ */ React13.createElement("div", { className: "ai-agent-panel__history-collapsed-spacer" })
|
|
5930
6643
|
)
|
|
5931
|
-
) : /* @__PURE__ */
|
|
6644
|
+
) : /* @__PURE__ */ React13.createElement(React13.Fragment, null, /* @__PURE__ */ React13.createElement("div", { className: "ai-agent-panel__header" }, /* @__PURE__ */ React13.createElement("div", { className: "ai-agent-panel__header-actions" }, showSearch ? /* @__PURE__ */ React13.createElement(
|
|
5932
6645
|
Input,
|
|
5933
6646
|
{
|
|
5934
6647
|
placeholder: "Search conversations...",
|
|
5935
6648
|
value: searchQuery,
|
|
5936
6649
|
onChange: (e) => setSearchQuery(e.target.value),
|
|
5937
|
-
icon: /* @__PURE__ */
|
|
6650
|
+
icon: /* @__PURE__ */ React13.createElement(SearchIcon2, null),
|
|
5938
6651
|
autoFocus: true,
|
|
5939
6652
|
onBlur: () => {
|
|
5940
6653
|
if (!searchQuery) setShowSearch(false);
|
|
5941
6654
|
}
|
|
5942
6655
|
}
|
|
5943
|
-
) : /* @__PURE__ */
|
|
6656
|
+
) : /* @__PURE__ */ React13.createElement(React13.Fragment, null, /* @__PURE__ */ React13.createElement(
|
|
5944
6657
|
Button,
|
|
5945
6658
|
{
|
|
5946
6659
|
variant: "ghost",
|
|
5947
6660
|
size: "icon",
|
|
5948
6661
|
onClick: () => setShowSearch(true)
|
|
5949
6662
|
},
|
|
5950
|
-
/* @__PURE__ */
|
|
5951
|
-
), /* @__PURE__ */
|
|
6663
|
+
/* @__PURE__ */ React13.createElement(SearchIcon2, null)
|
|
6664
|
+
), /* @__PURE__ */ React13.createElement(
|
|
5952
6665
|
Button,
|
|
5953
6666
|
{
|
|
5954
6667
|
variant: "ghost",
|
|
5955
6668
|
size: "icon",
|
|
5956
6669
|
onClick: handleNewConversation
|
|
5957
6670
|
},
|
|
5958
|
-
/* @__PURE__ */
|
|
5959
|
-
))), /* @__PURE__ */
|
|
6671
|
+
/* @__PURE__ */ React13.createElement(PlusIcon, null)
|
|
6672
|
+
))), /* @__PURE__ */ React13.createElement(Tooltip, { content: "Collapse History", side: "bottom" }, /* @__PURE__ */ React13.createElement(Button, { variant: "ghost", size: "icon", onClick: toggleHistoryCollapse }, /* @__PURE__ */ React13.createElement(SidebarIcon, null))), collapsible && /* @__PURE__ */ React13.createElement(Button, { variant: "ghost", size: "icon", onClick: toggleCollapse }, position === "right" ? /* @__PURE__ */ React13.createElement(ChevronRightIcon, null) : /* @__PURE__ */ React13.createElement(ChevronLeftIcon, null))), /* @__PURE__ */ React13.createElement(ScrollArea, { className: "ai-agent-panel__conversations" }, activeConversationsList.length > 0 && /* @__PURE__ */ React13.createElement("div", { className: "ai-agent-panel__group ai-agent-panel__group--active" }, /* @__PURE__ */ React13.createElement("div", { className: "ai-agent-panel__group-label" }, /* @__PURE__ */ React13.createElement("span", null, "Active (", activeConversationsList.length, ")")), activeConversationsList.map((activeConv) => /* @__PURE__ */ React13.createElement(
|
|
5960
6673
|
"div",
|
|
5961
6674
|
{
|
|
5962
6675
|
key: activeConv.stableKey,
|
|
@@ -5968,37 +6681,37 @@ var AIAgentPanel = React12.forwardRef(({
|
|
|
5968
6681
|
}
|
|
5969
6682
|
}
|
|
5970
6683
|
},
|
|
5971
|
-
/* @__PURE__ */
|
|
5972
|
-
/* @__PURE__ */
|
|
6684
|
+
/* @__PURE__ */ React13.createElement("div", { className: "ai-agent-panel__conversation-content" }, /* @__PURE__ */ React13.createElement("div", { className: "ai-agent-panel__conversation-title" }, activeConv.isLoading && /* @__PURE__ */ React13.createElement(LoadingDotIcon, null), /* @__PURE__ */ React13.createElement("span", null, activeConv.title))),
|
|
6685
|
+
/* @__PURE__ */ React13.createElement(
|
|
5973
6686
|
"button",
|
|
5974
6687
|
{
|
|
5975
6688
|
className: "ai-agent-panel__conversation-close",
|
|
5976
6689
|
onClick: (e) => handleCloseConversation(activeConv.conversationId, e),
|
|
5977
6690
|
title: "Close conversation"
|
|
5978
6691
|
},
|
|
5979
|
-
/* @__PURE__ */
|
|
6692
|
+
/* @__PURE__ */ React13.createElement(CloseIcon2, null)
|
|
5980
6693
|
)
|
|
5981
|
-
))), conversationsLoading ? /* @__PURE__ */
|
|
6694
|
+
))), conversationsLoading ? /* @__PURE__ */ React13.createElement("div", { className: "ai-agent-panel__loading" }, /* @__PURE__ */ React13.createElement("div", { className: "ai-agent-panel__loading-spinner" }), /* @__PURE__ */ React13.createElement("span", null, "Loading conversations...")) : conversationsError ? /* @__PURE__ */ React13.createElement("div", { className: "ai-agent-panel__empty" }, /* @__PURE__ */ React13.createElement("p", null, "Error: ", conversationsError), /* @__PURE__ */ React13.createElement(Button, { variant: "secondary", size: "sm", onClick: handleRefreshConversations }, "Retry")) : groupedConversations.length === 0 && activeConversationsList.length === 0 ? /* @__PURE__ */ React13.createElement("div", { className: "ai-agent-panel__empty" }, /* @__PURE__ */ React13.createElement(MessageIcon, null), /* @__PURE__ */ React13.createElement("p", null, "No conversations yet"), /* @__PURE__ */ React13.createElement("p", { className: "ai-agent-panel__empty-hint" }, "Start chatting to create your first conversation")) : /* @__PURE__ */ React13.createElement(React13.Fragment, null, activeConversationsList.length > 0 && groupedConversations.some((g) => g.count > 0) && /* @__PURE__ */ React13.createElement("div", { className: "ai-agent-panel__group-divider" }), groupedConversations.map((group) => /* @__PURE__ */ React13.createElement("div", { key: group.label, className: "ai-agent-panel__group" }, /* @__PURE__ */ React13.createElement(
|
|
5982
6695
|
"div",
|
|
5983
6696
|
{
|
|
5984
6697
|
className: "ai-agent-panel__group-label ai-agent-panel__group-label--clickable",
|
|
5985
6698
|
onClick: () => toggleSection(group.label)
|
|
5986
6699
|
},
|
|
5987
|
-
/* @__PURE__ */
|
|
5988
|
-
/* @__PURE__ */
|
|
6700
|
+
/* @__PURE__ */ React13.createElement("span", null, group.label, " ", group.count > 0 && `(${group.count})`),
|
|
6701
|
+
/* @__PURE__ */ React13.createElement("span", { className: "ai-agent-panel__group-chevron" }, expandedSections[group.label] ? "\u25BC" : "\u25B6")
|
|
5989
6702
|
), expandedSections[group.label] && group.conversations.length > 0 && group.conversations.map((conv) => {
|
|
5990
6703
|
const isActive = activeConversations.has(conv.conversationId);
|
|
5991
|
-
return /* @__PURE__ */
|
|
6704
|
+
return /* @__PURE__ */ React13.createElement(
|
|
5992
6705
|
"div",
|
|
5993
6706
|
{
|
|
5994
6707
|
key: conv.conversationId,
|
|
5995
6708
|
className: `ai-agent-panel__conversation ${currentConversationId === conv.conversationId ? "ai-agent-panel__conversation--current" : ""} ${isActive ? "ai-agent-panel__conversation--in-active" : ""}`,
|
|
5996
6709
|
onClick: () => handleConversationSelect(conv)
|
|
5997
6710
|
},
|
|
5998
|
-
/* @__PURE__ */
|
|
6711
|
+
/* @__PURE__ */ React13.createElement("div", { className: "ai-agent-panel__conversation-content" }, /* @__PURE__ */ React13.createElement("div", { className: "ai-agent-panel__conversation-title" }, isActive && /* @__PURE__ */ React13.createElement("span", { className: "ai-agent-panel__active-badge" }, "\u25CF"), conversationFirstPrompts[conv.conversationId] || conv.title))
|
|
5999
6712
|
);
|
|
6000
6713
|
}))))))),
|
|
6001
|
-
/* @__PURE__ */
|
|
6714
|
+
/* @__PURE__ */ React13.createElement("div", { className: "ai-agent-panel__chat" }, !showConversationHistory && collapsible && /* @__PURE__ */ React13.createElement("div", { className: "ai-agent-panel__chat-header" }, /* @__PURE__ */ React13.createElement("div", { className: "ai-agent-panel__chat-header-spacer" }), /* @__PURE__ */ React13.createElement(Tooltip, { content: "Collapse Panel", side: position === "right" ? "left" : "right" }, /* @__PURE__ */ React13.createElement(Button, { variant: "ghost", size: "icon", onClick: toggleCollapse }, position === "right" ? /* @__PURE__ */ React13.createElement(ChevronRightIcon, null) : /* @__PURE__ */ React13.createElement(ChevronLeftIcon, null)))), showContextNotification && /* @__PURE__ */ React13.createElement("div", { className: "ai-agent-panel__context-notification" }, /* @__PURE__ */ React13.createElement(SparkleIcon, null), /* @__PURE__ */ React13.createElement("span", null, "Agent now has new context")), activeConversationsList.map((activeConv) => /* @__PURE__ */ React13.createElement(
|
|
6002
6715
|
ChatPanelWrapper,
|
|
6003
6716
|
{
|
|
6004
6717
|
key: `${activeConv.stableKey}-${activeConv.agentId}`,
|
|
@@ -6026,14 +6739,31 @@ var AIAgentPanel = React12.forwardRef(({
|
|
|
6026
6739
|
handleAgentSwitch,
|
|
6027
6740
|
agentsLoading,
|
|
6028
6741
|
contextSections: mergedContext.sections,
|
|
6029
|
-
totalContextTokens:
|
|
6742
|
+
totalContextTokens: filteredContext.totalTokens,
|
|
6030
6743
|
maxContextTokens,
|
|
6031
6744
|
enableContextDetailView,
|
|
6745
|
+
disabledSectionIds: currentDisabledSections,
|
|
6746
|
+
onToggleSection: handleContextSectionToggle,
|
|
6032
6747
|
onConversationCreated: handleConversationCreated,
|
|
6033
|
-
conversationInitialPrompt: activeConv.conversationInitialPrompt
|
|
6748
|
+
conversationInitialPrompt: activeConv.conversationInitialPrompt,
|
|
6749
|
+
cssUrl,
|
|
6750
|
+
markdownClass,
|
|
6751
|
+
width,
|
|
6752
|
+
height,
|
|
6753
|
+
scrollToEnd,
|
|
6754
|
+
prismStyle,
|
|
6755
|
+
showSaveButton,
|
|
6756
|
+
showEmailButton,
|
|
6757
|
+
messages,
|
|
6758
|
+
showCallToAction,
|
|
6759
|
+
callToActionButtonText,
|
|
6760
|
+
callToActionEmailAddress,
|
|
6761
|
+
callToActionEmailSubject,
|
|
6762
|
+
customerEmailCaptureMode,
|
|
6763
|
+
customerEmailCapturePlaceholder
|
|
6034
6764
|
}
|
|
6035
|
-
)), loadingConversationId && /* @__PURE__ */
|
|
6036
|
-
/* @__PURE__ */
|
|
6765
|
+
)), loadingConversationId && /* @__PURE__ */ React13.createElement("div", { className: "ai-agent-panel__conversation-loading-overlay" }, /* @__PURE__ */ React13.createElement("div", { className: "ai-agent-panel__loading-spinner" }), /* @__PURE__ */ React13.createElement("p", null, "Loading conversation...")), currentAgentMetadata && activeConversationsList.length === 0 && !loadingConversationId && /* @__PURE__ */ React13.createElement("div", { className: "ai-agent-panel__empty-chat" }, /* @__PURE__ */ React13.createElement(MessageIcon, null), /* @__PURE__ */ React13.createElement("p", null, "Select a conversation or start a new one"), /* @__PURE__ */ React13.createElement(Button, { variant: "default", size: "sm", onClick: handleNewConversation }, "New Conversation")), agentsLoading && !currentAgentMetadata && /* @__PURE__ */ React13.createElement("div", { className: "ai-agent-panel__loading" }, /* @__PURE__ */ React13.createElement("div", { className: "ai-agent-panel__loading-spinner" }), /* @__PURE__ */ React13.createElement("p", null, "Loading agent..."))),
|
|
6766
|
+
/* @__PURE__ */ React13.createElement(
|
|
6037
6767
|
Dialog,
|
|
6038
6768
|
{
|
|
6039
6769
|
isOpen: showHandoffDialog,
|
|
@@ -6041,7 +6771,7 @@ var AIAgentPanel = React12.forwardRef(({
|
|
|
6041
6771
|
title: "Switch Agent?",
|
|
6042
6772
|
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"}.`
|
|
6043
6773
|
},
|
|
6044
|
-
/* @__PURE__ */
|
|
6774
|
+
/* @__PURE__ */ React13.createElement(DialogFooter, null, /* @__PURE__ */ React13.createElement(Button, { variant: "outline", onClick: handleHandoffCancel }, "Stay with current agent"), /* @__PURE__ */ React13.createElement(Button, { onClick: handleHandoffConfirm }, "Switch agent"))
|
|
6045
6775
|
)
|
|
6046
6776
|
);
|
|
6047
6777
|
});
|