{"version":3,"sources":["../src/components/Chatbot/Chatbot.tsx","../src/components/Chatbot/ChatbotFab.tsx","../src/components/Chatbot/ChatbotPanel.tsx","../src/components/Chatbot/ChatbotMessageList.tsx","../src/components/Chatbot/ChatbotMessage.tsx","../src/components/Chatbot/ChatbotContentRenderer.tsx","../src/components/Chatbot/ChatbotTypingIndicator.tsx","../src/components/Chatbot/ChatbotInput.tsx","../src/components/Chatbot/ChatbotConversationList.tsx"],"sourcesContent":["import { useRef } from 'react';\nimport ChatbotFab from './ChatbotFab';\nimport ChatbotPanel from './ChatbotPanel';\nimport ChatbotMessageList from './ChatbotMessageList';\nimport ChatbotInput from './ChatbotInput';\nimport ChatbotConversationList from './ChatbotConversationList';\nimport { createUseChatbot } from '../../hooks/useChatbot';\nimport type {\n ChatbotApiClient,\n ChatbotCurrentContext,\n ChatbotUser,\n} from '../../types/chatbot';\n\n/**\n * Props for the root Chatbot component\n */\nexport interface ChatbotProps {\n /** API client that wraps REST calls — produced by the host app */\n apiClient: ChatbotApiClient;\n /** Authenticated user (used only for UI decoration today) */\n user: ChatbotUser;\n /** Optional context sent with every outgoing message */\n currentContext?: ChatbotCurrentContext;\n /** Extra tailwind classes on the FAB */\n fabClassName?: string;\n /** Extra tailwind classes on the panel */\n panelClassName?: string;\n}\n\n/**\n * Analytica student chatbot — floating assistant available in the\n * authenticated area. Composes the Fab + Panel and owns no state of its\n * own: the `useChatbot` hook (bound to the provided `apiClient`) keeps\n * everything in one place.\n *\n * Host apps should render this inside the layout so the FAB is reachable\n * from every page. `currentContext` is a hint (activityId, questionId,\n * lessonId) produced by the host to enrich the AI prompt — it flows\n * untouched to the backend.\n */\nexport default function Chatbot({\n apiClient,\n user,\n currentContext,\n fabClassName,\n panelClassName,\n}: Readonly) {\n // Keep the latest apiClient in a ref — any `apiClient` prop swap (e.g.,\n // after re-auth with a new token-bound client) is seen by the hook on\n // its next call without tearing down internal state.\n const apiClientRef = useRef(apiClient);\n apiClientRef.current = apiClient;\n\n // Bind the factory exactly once, passing a getter so the hook resolves\n // `apiClientRef.current` fresh on every call instead of snapshotting\n // whatever client we saw on first mount.\n const boundHookRef = useRef | null>(null);\n boundHookRef.current ??= createUseChatbot(() => apiClientRef.current);\n const useBoundChatbot = boundHookRef.current;\n const {\n isOpen,\n isSending,\n isLoadingHistory,\n isLoadingMessages,\n errorMessage,\n conversations,\n activeConversationId,\n messages,\n togglePanel,\n closePanel,\n selectConversation,\n startNewConversation,\n sendMessage,\n deleteConversation,\n } = useBoundChatbot();\n\n const firstName = user.name?.trim().split(/\\s+/)[0];\n const emptyHint = firstName\n ? `Olá, ${firstName}! Como posso ajudar nos seus estudos?`\n : 'Comece a conversa enviando uma pergunta.';\n\n const handleSend = (text: string): void => {\n sendMessage(text, currentContext).catch(() => undefined);\n };\n\n return (\n <>\n {!isOpen && (\n \n )}\n \n }\n messagesSlot={\n \n }\n inputSlot={}\n />\n \n );\n}\n","import { ChatCircleDotsIcon } from '@phosphor-icons/react';\nimport Button from '../Button/Button';\nimport Text from '../Text/Text';\nimport { cn } from '../../utils/utils';\n\n/**\n * Props for the floating action button that opens the chatbot panel\n */\nexport interface ChatbotFabProps {\n /** Click handler — opens or toggles the panel */\n onClick: () => void;\n /** Whether the panel is currently open (drives aria + styling) */\n isOpen?: boolean;\n /** Optional unread count badge */\n unreadCount?: number;\n /** Extra tailwind classes */\n className?: string;\n}\n\n/**\n * Circular floating action button anchored bottom-right of the viewport.\n * Uses `fixed` so it sits on top of page scroll.\n */\nexport default function ChatbotFab({\n onClick,\n isOpen = false,\n unreadCount = 0,\n className,\n}: Readonly) {\n const noun = unreadCount === 1 ? 'mensagem não lida' : 'mensagens não lidas';\n let badgeLabel: string;\n if (unreadCount > 9) {\n badgeLabel = 'Mais de 9 mensagens não lidas';\n } else {\n badgeLabel = `${unreadCount} ${noun}`;\n }\n\n const baseAriaLabel = isOpen\n ? 'Fechar assistente'\n : 'Abrir assistente de estudos';\n const ariaLabel =\n unreadCount > 0 ? `${baseAriaLabel} (${badgeLabel})` : baseAriaLabel;\n\n return (\n \n \n {unreadCount > 0 && (\n \n {unreadCount > 9 ? '9+' : unreadCount}\n \n )}\n \n );\n}\n","import { useEffect, useRef, useState, type ReactNode } from 'react';\nimport {\n CaretUpIcon,\n ListIcon,\n MinusIcon,\n PlusIcon,\n RobotIcon,\n XIcon,\n} from '@phosphor-icons/react';\nimport Text from '../Text/Text';\nimport IconButton from '../IconButton/IconButton';\nimport { cn } from '../../utils/utils';\n\nconst HEADER_ICON_BUTTON_CLASSES =\n '!text-white hover:!bg-white/15 hover:!text-white focus-visible:!ring-white/60';\n\n/**\n * Props for the chatbot panel shell\n */\nexport interface ChatbotPanelProps {\n isOpen: boolean;\n onClose: () => void;\n onStartNew: () => void;\n /** Conversation list passed as a node so the panel stays layout-only */\n historySlot: ReactNode;\n /** Messages list passed as a node (allows easy swap during tests) */\n messagesSlot: ReactNode;\n /** Input area slot (auto-resize textarea + send button) */\n inputSlot: ReactNode;\n /** Optional error banner (string shown above the input) */\n errorMessage?: string | null;\n className?: string;\n}\n\n/**\n * Fixed drawer-like panel anchored to the bottom-right of the screen.\n * Splits into optional history sidebar + main conversation area. The\n * panel is purely presentational — state lives in the `useChatbot` hook.\n */\nexport default function ChatbotPanel({\n isOpen,\n onClose,\n onStartNew,\n historySlot,\n messagesSlot,\n inputSlot,\n errorMessage,\n className,\n}: Readonly) {\n const [showHistory, setShowHistory] = useState(false);\n const [isMinimized, setIsMinimized] = useState(false);\n const closeButtonRef = useRef(null);\n const previouslyFocusedRef = useRef(null);\n const previousErrorRef = useRef(errorMessage);\n\n // Reset the minimized state every time the panel is reopened so the\n // user always lands on the full conversation view.\n useEffect(() => {\n if (isOpen) {\n setIsMinimized(false);\n }\n }, [isOpen]);\n\n // Auto-expand on new errors so the role=\"alert\" banner is mounted and\n // announced by screen readers. Without this, a failed send while\n // minimized would be silent — the body (including the alert node) is\n // unmounted in the minimized state. Compare against the previous value\n // (not just truthy/falsy) so a distinct truthy error arriving after the\n // user minimized also re-expands and re-announces.\n useEffect(() => {\n const previous = previousErrorRef.current;\n if (errorMessage && errorMessage !== previous) {\n setIsMinimized(false);\n }\n previousErrorRef.current = errorMessage;\n }, [errorMessage]);\n\n // Escape-key dismissal + focus management: when the panel opens we\n // remember the previously focused element, move focus to the close\n // button, and listen for Escape to close. On close, focus is restored.\n useEffect(() => {\n if (!isOpen) return;\n previouslyFocusedRef.current = document.activeElement;\n closeButtonRef.current?.focus();\n\n const handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === 'Escape') {\n event.stopPropagation();\n onClose();\n }\n };\n globalThis.addEventListener('keydown', handleKeyDown);\n\n return () => {\n globalThis.removeEventListener('keydown', handleKeyDown);\n const previous = previouslyFocusedRef.current as HTMLElement | null;\n if (previous && typeof previous.focus === 'function') {\n previous.focus();\n }\n };\n }, [isOpen, onClose]);\n\n if (!isOpen) return null;\n\n return (\n ` comes with `margin: auto` by default; `m-0`\n // resets that so the `fixed` positioning below pins the panel\n // to the bottom-right as intended. The panel sits at the same\n // bottom-right corner as the FAB (the FAB is hidden while the\n // panel is open to avoid stacking).\n 'fixed bottom-6 right-6 z-40 m-0',\n // Responsive sizing: fills small viewports without overflowing,\n // yet caps at the intended desktop footprint on larger screens.\n // The panel widens when the history sidebar is visible so the\n // main chat column keeps enough horizontal room for messages.\n 'flex w-[calc(100vw-3rem)] flex-col overflow-hidden rounded-2xl p-0',\n showHistory\n ? 'max-w-[620px] sm:max-w-[640px]'\n : 'max-w-[400px] sm:max-w-[420px]',\n 'border border-background-200 bg-background shadow-2xl',\n className\n )}\n >\n
\n
\n \n \n
\n
\n \n Assistente de estudos\n \n \n Tire dúvidas enquanto estuda\n \n
\n
\n
\n {!isMinimized && (\n <>\n setShowHistory((v) => !v)}\n icon={}\n className={HEADER_ICON_BUTTON_CLASSES}\n />\n }\n className={HEADER_ICON_BUTTON_CLASSES}\n />\n \n )}\n setIsMinimized((v) => !v)}\n icon={\n isMinimized ? : \n }\n className={HEADER_ICON_BUTTON_CLASSES}\n />\n }\n className={HEADER_ICON_BUTTON_CLASSES}\n />\n
\n \n\n {!isMinimized && (\n
\n {showHistory && (\n
\n {historySlot}\n
\n )}\n
\n {messagesSlot}\n {errorMessage && (\n \n \n {errorMessage}\n \n
\n )}\n {inputSlot}\n
\n \n )}\n \n );\n}\n","import { useEffect, useRef } from 'react';\nimport Text from '../Text/Text';\nimport { cn } from '../../utils/utils';\nimport ChatbotMessage from './ChatbotMessage';\nimport ChatbotTypingIndicator from './ChatbotTypingIndicator';\nimport type { ChatbotMessage as ChatbotMessageType } from '../../types/chatbot';\n\n/**\n * Props for the scrollable list of messages\n */\nexport interface ChatbotMessageListProps {\n messages: ChatbotMessageType[];\n isSending?: boolean;\n isLoading?: boolean;\n emptyHint?: string;\n className?: string;\n}\n\n/**\n * Vertical list of messages with auto-scroll to bottom on new items.\n */\nexport default function ChatbotMessageList({\n messages,\n isSending = false,\n isLoading = false,\n emptyHint = 'Comece a conversa enviando uma pergunta.',\n className,\n}: Readonly) {\n const bottomRef = useRef(null);\n const didMountRef = useRef(false);\n\n useEffect(() => {\n // Skip the scroll on initial render — otherwise scrollIntoView could\n // yank the page viewport before the panel is visible. Only auto-scroll\n // on subsequent updates (new message, typing indicator changes).\n if (!didMountRef.current) {\n didMountRef.current = true;\n return;\n }\n if (bottomRef.current) {\n bottomRef.current.scrollIntoView({ behavior: 'smooth', block: 'end' });\n }\n }, [messages.length, isSending]);\n\n const showEmpty = !isLoading && messages.length === 0 && !isSending;\n\n return (\n \n {showEmpty && (\n
\n \n {emptyHint}\n \n
\n )}\n {messages.map((msg) => (\n \n ))}\n {isSending && (\n
\n \n
\n )}\n
\n
\n );\n}\n","import { RobotIcon, UserIcon } from '@phosphor-icons/react';\nimport Text from '../Text/Text';\nimport { cn } from '../../utils/utils';\nimport ChatbotContentRenderer from './ChatbotContentRenderer';\nimport {\n CHATBOT_MESSAGE_ROLES,\n type ChatbotMessage as ChatbotMessageType,\n} from '../../types/chatbot';\n\n/**\n * Props for a single message bubble\n */\nexport interface ChatbotMessageProps {\n message: ChatbotMessageType;\n className?: string;\n /** Optional classes forwarded to the assistant markdown renderer. */\n contentClassName?: string;\n}\n\n/**\n * Format a timestamp using pt-BR locale (hour and minute only)\n */\nfunction formatTimestamp(value: Date | string): string {\n const date = value instanceof Date ? value : new Date(value);\n if (Number.isNaN(date.getTime())) return '';\n return date.toLocaleTimeString('pt-BR', {\n hour: '2-digit',\n minute: '2-digit',\n });\n}\n\n/**\n * Individual chat bubble. User messages are aligned to the right with a\n * primary background; assistant messages sit on the left in a neutral\n * background and pass through markdown / LaTeX renderers.\n */\nexport default function ChatbotMessage({\n message,\n className,\n contentClassName,\n}: Readonly) {\n const isUser = message.role === CHATBOT_MESSAGE_ROLES.USER;\n return (\n \n {!isUser && (\n \n \n \n )}\n \n {isUser ? (\n \n {message.content}\n \n ) : (\n \n )}\n \n {formatTimestamp(message.createdAt)}\n \n \n {isUser && (\n \n \n \n )}\n \n );\n}\n","import ReactMarkdown from 'react-markdown';\nimport remarkGfm from 'remark-gfm';\nimport HtmlMathRenderer from '../HtmlMathRenderer/HtmlMathRenderer';\nimport { containsMath } from '../HtmlMathRenderer/utils';\nimport { cn } from '../../utils/utils';\n\n/**\n * Props for the assistant content renderer\n */\nexport interface ChatbotContentRendererProps {\n content: string;\n className?: string;\n}\n\n/**\n * Unambiguous math detection: only treats content as math when there is a\n * `$$...$$` display block, an explicit LaTeX block\n * (`\\begin{...}...\\end{...}`), or an inline `$...$` whose inner content\n * contains an unmistakably mathematical character (backslash / caret /\n * underscore / curly brace). This avoids false positives on prose that\n * contains currency like \"R$ 20\" or \"por $20 e o livro $ 5\".\n *\n * Instead of `matchAll` with a lazy regex (which would greedily consume\n * adjacent `$`s left-to-right and could miss a valid formula following a\n * currency span on the same line, e.g. \"Preço R$ 20 e a fórmula $x^2+1$\"),\n * we collect every `$` index and probe all pairs — detection is O(N²) in\n * the worst case but N here is the count of `$` on a single line, so in\n * practice it remains linear on realistic input.\n */\nconst MATH_CHAR_PATTERN = /[\\\\^_{}]/;\n\n/**\n * Collect every unescaped `$` index in the content.\n */\nfunction collectDollarIndices(content: string): number[] {\n const result: number[] = [];\n for (let i = 0; i < content.length; i++) {\n if (content[i] === '$' && content[i - 1] !== '\\\\') {\n result.push(i);\n }\n }\n return result;\n}\n\n/**\n * Return true if any `$...$` pair spanning a single line contains a\n * math-only character.\n */\nfunction hasInlineMathSpan(content: string, indices: number[]): boolean {\n for (let i = 0; i < indices.length; i++) {\n for (let j = i + 1; j < indices.length; j++) {\n const inner = content.slice(indices[i] + 1, indices[j]);\n if (inner.includes('\\n')) break;\n if (MATH_CHAR_PATTERN.test(inner)) return true;\n }\n }\n return false;\n}\n\nfunction looksLikeMath(content: string): boolean {\n if (!containsMath(content)) return false;\n if (/\\$\\$[\\s\\S]+?\\$\\$/.test(content)) return true;\n if (/\\\\begin\\{[^}]+\\}[\\s\\S]+?\\\\end\\{[^}]+\\}/.test(content)) return true;\n return hasInlineMathSpan(content, collectDollarIndices(content));\n}\n\n/**\n * Renders a markdown string safely. When the content contains inline LaTeX\n * ($...$ or $$...$$) we fallback to `HtmlMathRenderer`, which already\n * supports math. For plain markdown we use `react-markdown` with GFM\n * (tables, task lists, strikethrough) and no raw HTML — escape by default.\n */\nexport default function ChatbotContentRenderer({\n content,\n className,\n}: Readonly) {\n if (looksLikeMath(content)) {\n return (\n \n );\n }\n\n return (\n *:first-child]:mt-0 [&>*:last-child]:mb-0',\n className\n )}\n >\n {/*\n SECURITY: do NOT add `rehype-raw` or any raw-HTML plugin to\n `rehypePlugins` here. Chatbot content is untrusted (LLM output) and\n must be escaped by react-markdown's default sanitization. Enabling\n raw HTML would reintroduce an XSS vector — any change requires an\n explicit security review and a dedicated sanitization pipeline.\n */}\n {content}\n \n );\n}\n","import Text from '../Text/Text';\nimport { cn } from '../../utils/utils';\n\n/**\n * Props for the typing indicator shown while the assistant is generating\n * a reply.\n */\nexport interface ChatbotTypingIndicatorProps {\n className?: string;\n}\n\n/**\n * Three animated dots signalling \"assistant is typing\".\n * Implemented in pure Tailwind — no additional dependencies.\n */\nexport default function ChatbotTypingIndicator({\n className,\n}: Readonly) {\n return (\n \n \n \n \n \n );\n}\n","import { useCallback, useState, type KeyboardEvent } from 'react';\nimport { PaperPlaneTiltIcon } from '@phosphor-icons/react';\nimport Button from '../Button/Button';\nimport TextArea from '../TextArea/TextArea';\nimport { cn } from '../../utils/utils';\n\nconst MIN_HEIGHT = 40;\nconst MAX_HEIGHT = 120;\n\n/**\n * Props for the chatbot text input\n */\nexport interface ChatbotInputProps {\n onSend: (text: string) => void;\n disabled?: boolean;\n placeholder?: string;\n className?: string;\n}\n\n/**\n * Auto-resizing textarea + send button. Enter sends, Shift+Enter creates a\n * new line, as is standard for chat UIs.\n *\n * Uses the library's `