function MainComponent() { const [messages, setMessages] = useState([ { role: "system", content: "Welcome! I'm your BI assistant. How can I help analyze your data today?" } ]); const [streamingMessage, setStreamingMessage] = useState(""); const [loading, setLoading] = useState(false); const [inputValue, setInputValue] = useState(""); const messagesEndRef = useRef(null); const handleStreamResponse = useHandleStreamResponse({ onChunk: setStreamingMessage, onFinish: (message)=>{ setMessages((prev)=>[ ...prev, { role: "assistant", content: message } ]); setStreamingMessage(""); setLoading(false); } }); const scrollToBottom = ()=>{ messagesEndRef.current?.scrollIntoView({ behavior: "smooth" }); }; useEffect(()=>{ scrollToBottom(); }, [ messages, streamingMessage ]); const handleSubmit = async ()=>{ if (!inputValue.trim() || loading) return; const userMessage = { role: "user", content: inputValue }; setMessages((prev)=>[ ...prev, userMessage ]); setInputValue(""); setLoading(true); const systemContext = "You are a BI assistant. Analyze the mock data and provide insights. Keep responses concise and focused on key metrics."; const response = await fetch("/integrations/anthropic-claude/", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [ { role: "system", content: systemContext }, ...messages, userMessage ], stream: true }) }); handleStreamResponse(response); }; return /*#__PURE__*/ React.createElement("div", { className: "h-screen flex flex-col bg-gray-50", __source: { fileName: "", lineNumber: 59, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-white border-b px-6 py-4", __source: { fileName: "", lineNumber: 60, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-semibold text-gray-800", __source: { fileName: "", lineNumber: 61, columnNumber: 9 }, __self: this }, "BI Assistant")), /*#__PURE__*/ React.createElement("div", { className: "flex-1 overflow-y-auto px-4 py-6", __source: { fileName: "", lineNumber: 64, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-3xl mx-auto space-y-6", __source: { fileName: "", lineNumber: 65, columnNumber: 9 }, __self: this }, messages.map((msg, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `flex ${msg.role === "user" ? "justify-end" : "justify-start"}`, __source: { fileName: "", lineNumber: 67, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `max-w-[80%] rounded-2xl px-6 py-4 ${msg.role === "user" ? "bg-blue-600 text-white" : "bg-white shadow-sm border"}`, __source: { fileName: "", lineNumber: 71, columnNumber: 15 }, __self: this }, msg.role === "assistant" && /*#__PURE__*/ React.createElement("div", { className: "w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center mb-2", __source: { fileName: "", lineNumber: 79, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-robot text-blue-500", __source: { fileName: "", lineNumber: 80, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("p", { className: "text-sm", __source: { fileName: "", lineNumber: 83, columnNumber: 17 }, __self: this }, msg.content)))), streamingMessage && /*#__PURE__*/ React.createElement("div", { className: "flex justify-start", __source: { fileName: "", lineNumber: 88, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-[80%] rounded-2xl px-6 py-4 bg-white shadow-sm border", __source: { fileName: "", lineNumber: 89, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center mb-2", __source: { fileName: "", lineNumber: 90, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-robot text-blue-500", __source: { fileName: "", lineNumber: 91, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("p", { className: "text-sm", __source: { fileName: "", lineNumber: 93, columnNumber: 17 }, __self: this }, streamingMessage))), /*#__PURE__*/ React.createElement("div", { ref: messagesEndRef, __source: { fileName: "", lineNumber: 97, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "border-t bg-white p-4", __source: { fileName: "", lineNumber: 101, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-3xl mx-auto flex gap-4", __source: { fileName: "", lineNumber: 102, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: inputValue, onChange: (e)=>setInputValue(e.target.value), onKeyPress: (e)=>e.key === "Enter" && handleSubmit(), placeholder: "Ask about your data...", className: "flex-1 px-4 py-2 rounded-lg border focus:outline-none focus:ring-2 focus:ring-blue-500", __source: { fileName: "", lineNumber: 103, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handleSubmit, disabled: loading || !inputValue.trim(), className: "px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed", __source: { fileName: "", lineNumber: 111, columnNumber: 11 }, __self: this }, loading ? /*#__PURE__*/ React.createElement("i", { className: "fas fa-circle-notch fa-spin", __source: { fileName: "", lineNumber: 117, columnNumber: 15 }, __self: this }) : /*#__PURE__*/ React.createElement("i", { className: "fas fa-paper-plane", __source: { fileName: "", lineNumber: 119, columnNumber: 15 }, __self: this }))))); }