@manta-eu/react 0.1.0

package/dist/components/chat-view/ActiveChatConnectionNotice.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { match } from "ts-pattern";
+import { Button } from "#components/button/index";
+import { cn } from "#lib/utils";
+export function ActiveChatConnectionNotice(props) {
+    const { connectionState, isRecovering, onRetry } = props;
+    const notice = match(connectionState)
+        .with("closed", () => ({
+        message: "The chat connection closed. Retry to recover the response.",
+        role: "alert",
+        showRetry: true,
+        tone: "bg-error text-error-foreground",
+    }))
+        .with("reconnecting", () => ({
+        message: "Connecting to chat… Any active response will continue in the background.",
+        role: "status",
+        showRetry: false,
+        tone: "bg-accent text-default-foreground",
+    }))
+        .with("open", () => isRecovering
+        ? {
+            message: "Recovering the response…",
+            role: "status",
+            showRetry: false,
+            tone: "bg-accent text-default-foreground",
+        }
+        : null)
+        .with(undefined, () => null)
+        .exhaustive();
+    if (!notice)
+        return null;
+    return (_jsxs("div", { role: notice.role, "data-testid": "active-chat-connection-notice", className: cn("flex items-center justify-center gap-3 px-4 py-2 text-center typography-small", notice.tone), children: [_jsx("span", { children: notice.message }), notice.showRetry && (_jsx(Button, { type: "button", variant: "ghost", size: "xs", rounded: "sm", onClick: onRetry, children: "Retry" }))] }));
+}

package/dist/components/chat-view/Chat.d.ts

@@ -0,0 +1,29 @@
+import { type ChatContext } from "@manta-eu/client/shared/agent-types";
+import { type MantaModelId } from "@manta-eu/client/shared/model";
+import type { ReactNode } from "react";
+import type { CopilotMenuDefaults, Datastore, PageContext, User } from "#lib/chat-types";
+export type ChatProps = {
+    datastore?: Datastore;
+    user: User;
+    onLogout?: () => void;
+    isCopilot?: boolean;
+    isEmbedded?: boolean;
+    isOperator: boolean;
+    onCloseAction?: () => void;
+    pageContext?: PageContext;
+    allowedModels?: MantaModelId[];
+    initialPrompt?: string;
+    title?: string;
+    welcomeSubtitle?: string;
+    mark?: ReactNode;
+    renderMenuItems?: (defaults: CopilotMenuDefaults) => ReactNode[];
+};
+export declare function Chat(props: ChatProps): import("react/jsx-runtime").JSX.Element;
+export type ChatWelcomeArgs = {
+    context?: ChatContext;
+    userName?: string | null;
+    datastoreName?: string;
+    welcomeSubtitle?: string;
+    assistantName: string;
+};
+//# sourceMappingURL=Chat.d.ts.map

package/dist/components/chat-view/Chat.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chat.d.ts","sourceRoot":"","sources":["../../../src/components/chat-view/Chat.tsx"],"names":[],"mappings":"AACA,OAAO,EAAmB,KAAK,WAAW,EAAE,MAAM,qCAAqC,CAAC;AAGxF,OAAO,EAOL,KAAK,YAAY,EAClB,MAAM,+BAA+B,CAAC;AAMvC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AA+BvC,OAAO,KAAK,EAAE,mBAAmB,EAAE,SAAS,EAAE,WAAW,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAYzF,MAAM,MAAM,SAAS,GAAG;IACtB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,IAAI,EAAE,IAAI,CAAC;IACX,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,EAAE,OAAO,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,aAAa,CAAC,EAAE,YAAY,EAAE,CAAC;IAC/B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,eAAe,CAAC,EAAE,CAAC,QAAQ,EAAE,mBAAmB,KAAK,SAAS,EAAE,CAAC;CAClE,CAAC;AAuCF,wBAAgB,IAAI,CAAC,KAAK,EAAE,SAAS,2CAKpC;AAmBD,MAAM,MAAM,eAAe,GAAG;IAC5B,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,aAAa,EAAE,MAAM,CAAC;CACvB,CAAC"}

package/dist/components/chat-view/Chat.js

@@ -0,0 +1,299 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { extractPlanName, humanizePlanName } from "@manta-eu/client/shared/agent-mode";
+import { ChatContextKind } from "@manta-eu/client/shared/agent-types";
+import { createUserMessage } from "@manta-eu/client/shared/message-utils";
+import { anthropicPrimaryModel, getMinimumContextWindow, isOperatorAllowedModel, operatorModelOptions, operatorModelOptionsFor, } from "@manta-eu/client/shared/model";
+import { humanCount } from "@manta-eu/lib/humanize";
+import { isPresent } from "@manta-eu/lib/present";
+import { ArrowUp } from "lucide-react";
+import { Suspense, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { toast } from "sonner";
+import { match, P } from "ts-pattern";
+import { useInterval } from "usehooks-ts";
+import { Conversation, ConversationScrollButton } from "../ai-elements/conversation.js";
+import { ActiveChatConnectionNotice } from "./ActiveChatConnectionNotice.js";
+import { CopilotHeader, RuleEditBanner } from "./ChatHeaders.js";
+import { ConversationStarters } from "./conversation-starters/index.js";
+import { DebugMessagesButton } from "./DebugMessagesButton.js";
+import { GraphContextPanel } from "./GraphContextPanel.js";
+import { LoadingView } from "./LoadingView.js";
+import { MessagesContainer } from "./MessagesContainer.js";
+import { StagedRuleCta } from "./StagedRuleCta.js";
+import { isPendingRequestUserInputPart } from "./tool-part-rendering.js";
+import { ChatInput, ChatInputAttachButton, ChatInputFilePreview, ChatInputFooter, ChatInputSubmit, ChatInputTextarea, ChatModelPicker, ChatWelcome, } from "#components/chat/index";
+import { ReviewCta } from "#components/review-cta/index";
+import { useShouldAutoFocusInput } from "#hooks/use-should-auto-focus-input";
+import { useConversationGraphContext } from "#hooks/useConversationGraphContext";
+import { useSelectedModel } from "#hooks/useSelectedModel";
+import { isDevBuild } from "#lib/build-config";
+import { findLatestShowcase } from "#lib/find-latest-showcase";
+import { useChatUpload } from "#lib/hooks/useChatUpload";
+import { planStatusLabel } from "#lib/plan-status-label";
+import { cn } from "#lib/utils";
+import { ActiveChatProvider, useActiveChatConnection } from "#providers/ActiveChatProvider";
+import { useAssistantName } from "#providers/AssistantNameProvider";
+import { useChatManagerConnection } from "#providers/ChatManagerProvider";
+import { useMantaClient } from "#providers/index";
+import { useKnowledgeGraphState } from "#providers/KnowledgeGraphStateContext";
+import { getRuleDisplayName } from "#routes/rules/components/rules.utils";
+function useChatTurnState() {
+    const activeConversationId = useChatManagerConnection().activeConversation?.id;
+    const previousActiveConversationIdRef = useRef(activeConversationId);
+    const [thinkingSeconds, setThinkingSeconds] = useState(0);
+    const [pendingAssistantTurn, setPendingAssistantTurn] = useState(false);
+    const turnKeyRef = useRef(0);
+    const [activeTurnKey, setActiveTurnKey] = useState(undefined);
+    const resetChatTurn = useCallback(() => {
+        setPendingAssistantTurn(false);
+        setActiveTurnKey(undefined);
+        setThinkingSeconds(0);
+    }, []);
+    useEffect(() => {
+        const previousActiveConversationId = previousActiveConversationIdRef.current;
+        previousActiveConversationIdRef.current = activeConversationId;
+        // Preserve the optimistic turn while a blank chat materializes, but release it when leaving an established chat.
+        if (previousActiveConversationId && previousActiveConversationId !== activeConversationId) {
+            resetChatTurn();
+        }
+    }, [activeConversationId, resetChatTurn]);
+    return {
+        activeTurnKey,
+        pendingAssistantTurn,
+        resetChatTurn,
+        setActiveTurnKey,
+        setPendingAssistantTurn,
+        setThinkingSeconds,
+        thinkingSeconds,
+        turnKeyRef,
+    };
+}
+export function Chat(props) {
+    const turnState = useChatTurnState();
+    const content = _jsx(ChatContent, { ...props, turnState: turnState });
+    return _jsx(ActiveChatProvider, { children: props.isEmbedded ? _jsx(Suspense, { children: content }) : content });
+}
+function referenceToFilePart(reference, uploadsUrl) {
+    return {
+        type: "file",
+        mediaType: reference.mediaType,
+        filename: reference.fileName,
+        url: `${uploadsUrl}?key=${encodeURIComponent(reference.storageKey)}`,
+        providerMetadata: {
+            upload: {
+                storageKey: reference.storageKey,
+                byteSize: reference.byteSize,
+            },
+        },
+    };
+}
+function getChatWelcomeContent(args) {
+    return match(args.context)
+        .with({ kind: ChatContextKind.RuleEdit }, ({ ruleIri }) => ({
+        title: "Refine with Manta",
+        subtitle: `Describe the changes you'd like to make to ${getRuleDisplayName(ruleIri)}. Manta stages them for your review — nothing goes live until you commit.`,
+    }))
+        .with({ kind: ChatContextKind.RuleCreate }, () => ({
+        title: "Create a rule with Manta",
+        subtitle: "Describe the rule you want in your own words. Manta drafts it and stages it for your review — nothing goes live until you commit.",
+    }))
+        .with({ kind: ChatContextKind.Plan }, ({ planGraphIri }) => ({
+        title: extractPlanName(planGraphIri),
+        subtitle: "Ask questions about this plan or request changes.",
+    }))
+        .with(undefined, () => ({
+        title: "What would you like to improve today?",
+        subtitle: args.welcomeSubtitle ??
+            `Hi ${args.userName} from ${args.datastoreName ?? "Earth"}. ${args.assistantName} maps every signal, campaign, and product back to business impact.`,
+    }))
+        .exhaustive();
+}
+function ChatContent(props) {
+    const { datastore, user, isCopilot, isEmbedded, isOperator, onCloseAction, pageContext, allowedModels, initialPrompt, title, welcomeSubtitle, mark, renderMenuItems, turnState, } = props;
+    const assistantName = useAssistantName();
+    const { activeTurnKey, pendingAssistantTurn, resetChatTurn, setActiveTurnKey, setPendingAssistantTurn, setThinkingSeconds, thinkingSeconds, turnKeyRef, } = turnState;
+    const modelPickerOptions = isPresent(allowedModels) ? operatorModelOptionsFor(allowedModels) : operatorModelOptions;
+    const primaryModel = allowedModels?.[0] ?? anthropicPrimaryModel;
+    const showDebugMessages = isOperator || isDevBuild;
+    const shouldAutoFocusInput = useShouldAutoFocusInput();
+    const [selectedModel, setSelectedModel] = useSelectedModel(isOperatorAllowedModel(primaryModel) ? primaryModel : anthropicPrimaryModel);
+    const contextWindowModels = isPresent(allowedModels) ? allowedModels : [primaryModel];
+    const contextWindow = getMinimumContextWindow(contextWindowModels);
+    const { mantaBaseUrl, datastorePath } = useMantaClient();
+    const kg = useKnowledgeGraphState();
+    const { agent: managerAgent, selectedContext, pendingMessage, handleSelectPlan, startNewChat, activeConversation, isConversationLoading, connectionState, sendNewConversationMessage, } = useChatManagerConnection();
+    const activeChat = useActiveChatConnection();
+    const agent = activeChat?.agent ?? managerAgent;
+    const chatData = activeChat?.chatData;
+    const agentState = activeChat?.agentState;
+    const sendMessage = chatData?.sendMessage ?? sendNewConversationMessage;
+    const chatContext = selectedContext ?? agentState?.context;
+    const ruleEditContext = chatContext?.kind === ChatContextKind.RuleEdit ? chatContext : undefined;
+    const ruleEditName = ruleEditContext ? getRuleDisplayName(ruleEditContext.ruleIri) : undefined;
+    const isRuleCreateContext = chatContext?.kind === ChatContextKind.RuleCreate;
+    const agentMessages = useMemo(() => {
+        const messages = chatData?.messages ?? [];
+        return pendingMessage && !messages.some(({ id }) => id === pendingMessage.id)
+            ? [...messages, pendingMessage]
+            : messages;
+    }, [chatData?.messages, pendingMessage]);
+    const hasPendingMessage = Boolean(pendingMessage);
+    const latestMessage = agentMessages[agentMessages.length - 1];
+    const hasPendingQuestionnaire = latestMessage?.role === "assistant" && latestMessage.parts.some(isPendingRequestUserInputPart);
+    const isTranscriptSynced = activeChat?.isTranscriptSynced ?? !activeConversation?.id;
+    const isConnectingOrSyncing = !hasPendingMessage &&
+        (isConversationLoading ||
+            (!isPresent(agentMessages) && (agent.readyState !== WebSocket.OPEN || !isTranscriptSynced)));
+    const isSessionConnecting = Boolean(activeConversation?.id) && (agent.readyState !== WebSocket.OPEN || !agentState);
+    const addToolResult = chatData?.addToolResult;
+    const chatStatus = chatData?.status;
+    const error = chatData?.error;
+    const stop = chatData?.stop;
+    const isChatRecovering = chatData?.isRecovering ?? false;
+    const isChatStreaming = chatData?.isStreaming ?? chatStatus === "streaming";
+    const isChatSubmitted = pendingAssistantTurn || hasPendingMessage || (chatData?.isToolContinuation ?? false);
+    // useAgentChat briefly submits a resume probe on mount, even when the persisted chat is idle.
+    const isResumeProbe = chatStatus === "submitted" && !isChatSubmitted && !isChatStreaming && !isChatRecovering;
+    const status = match({
+        isRecovering: isChatRecovering,
+        isResumeProbe,
+        isSubmitted: isChatSubmitted,
+        isStreaming: isChatStreaming,
+        status: chatStatus,
+    })
+        .returnType()
+        .with({ isSubmitted: true }, () => "submitted")
+        .with({ status: "error" }, () => "error")
+        .with({ isStreaming: true }, () => "streaming")
+        .with({ isRecovering: true }, () => "submitted")
+        .with({ isResumeProbe: true }, () => "ready")
+        .otherwise(({ status }) => status);
+    const toolsUsedInSession = useRef(new Set());
+    const initialPromptSentRef = useRef(undefined);
+    const { uploadFiles, isUploading, progress: uploadProgress } = useChatUpload();
+    const beginAssistantTurn = useCallback(() => {
+        turnKeyRef.current += 1;
+        setActiveTurnKey(`turn-${turnKeyRef.current}`);
+        setPendingAssistantTurn(true);
+    }, [setActiveTurnKey, setPendingAssistantTurn, turnKeyRef]);
+    const handleAgentSubmit = useCallback(async (value, files) => {
+        if (status === "streaming") {
+            await stop?.();
+        }
+        let fileParts;
+        if (isPresent(files)) {
+            try {
+                const { uploaded, failed } = await uploadFiles(files);
+                const uploadsUrl = new URL(datastorePath("/agents/uploads/file"), mantaBaseUrl.origin).toString();
+                fileParts = uploaded.map((reference) => referenceToFilePart(reference, uploadsUrl));
+                if (isPresent(failed)) {
+                    const pronoun = failed.length > 1 ? "them" : "it";
+                    toast.warning(`${humanCount(failed.length, "file")} could not be attached. Your message was sent without ${pronoun}.`);
+                }
+            }
+            catch {
+                toast.warning("Files could not be attached. Your message was sent without them.");
+            }
+        }
+        beginAssistantTurn();
+        void sendMessage(createUserMessage({ text: value, fileParts, pageContext, model: selectedModel })).catch(resetChatTurn);
+    }, [
+        beginAssistantTurn,
+        resetChatTurn,
+        sendMessage,
+        status,
+        stop,
+        pageContext,
+        selectedModel,
+        uploadFiles,
+        mantaBaseUrl,
+        datastorePath,
+    ]);
+    const handleConversationStarterSubmit = useCallback((value) => {
+        void handleAgentSubmit(value, []);
+    }, [handleAgentSubmit]);
+    useEffect(() => {
+        if (!isPresent(initialPrompt) || initialPromptSentRef.current === initialPrompt)
+            return;
+        if (connectionState !== "open" || isConversationLoading || isPresent(activeConversation))
+            return;
+        initialPromptSentRef.current = initialPrompt;
+        handleConversationStarterSubmit(initialPrompt);
+    }, [initialPrompt, connectionState, isConversationLoading, activeConversation, handleConversationStarterSubmit]);
+    const handleRetryTurn = useCallback(async () => {
+        if (!chatData?.regenerate)
+            return;
+        beginAssistantTurn();
+        try {
+            await chatData.regenerate();
+        }
+        catch {
+            resetChatTurn();
+        }
+    }, [beginAssistantTurn, chatData?.regenerate, resetChatTurn]);
+    const handleFilesRejected = useCallback((rejected) => {
+        for (const { file, reason } of rejected) {
+            toast.error(`${file.name}: ${reason}`);
+        }
+    }, []);
+    const datastoreName = datastore?.name;
+    const welcome = getChatWelcomeContent({
+        context: chatContext,
+        userName: user?.name,
+        datastoreName,
+        welcomeSubtitle,
+        assistantName,
+    });
+    const hasMessages = isPresent(agentMessages);
+    const latestAssistantHasContent = latestMessage?.role === "assistant" && (latestMessage.parts?.length ?? 0) > 0;
+    const turnError = status === "error" ? error : undefined;
+    const isAwaitingAssistant = status === "submitted" || status === "streaming";
+    const turnInProgress = isAwaitingAssistant || isChatStreaming || isChatRecovering;
+    const isChatInputDisabled = isUploading || isSessionConnecting || turnInProgress || isResumeProbe || hasPendingQuestionnaire;
+    const pendingAssistantMessageId = activeTurnKey ?? latestMessage?.id;
+    const needsPendingPlaceholder = isAwaitingAssistant && latestMessage?.role !== "assistant";
+    const displayMessages = useMemo(() => {
+        if (!needsPendingPlaceholder || !pendingAssistantMessageId)
+            return agentMessages;
+        const placeholder = {
+            id: `pending-${pendingAssistantMessageId}`,
+            role: "assistant",
+            parts: [],
+            metadata: { createdAt: new Date().toISOString() },
+        };
+        return [...agentMessages, placeholder];
+    }, [agentMessages, needsPendingPlaceholder, pendingAssistantMessageId]);
+    useEffect(() => {
+        if (!pendingAssistantTurn)
+            return;
+        if (latestAssistantHasContent || error || status === "ready" || status === "error") {
+            setPendingAssistantTurn(false);
+        }
+    }, [pendingAssistantTurn, latestAssistantHasContent, error, status]);
+    useEffect(() => {
+        if (!turnInProgress && activeTurnKey)
+            setActiveTurnKey(undefined);
+    }, [turnInProgress, activeTurnKey]);
+    useEffect(() => {
+        if (!turnInProgress)
+            setThinkingSeconds(0);
+    }, [turnInProgress]);
+    useInterval(() => setThinkingSeconds((s) => s + 1), turnInProgress ? 1000 : null);
+    const showGraphContextPanel = hasMessages && !isCopilot;
+    const graphContext = useConversationGraphContext(agentMessages, { enabled: showGraphContextPanel });
+    const latestShowcase = useMemo(() => findLatestShowcase(agentMessages), [agentMessages]);
+    const chatPanelRef = useRef(null);
+    const dropZoneRef = useRef(null);
+    const connectionNotice = (_jsx(ActiveChatConnectionNotice, { connectionState: activeChat?.connectionState, isRecovering: isChatRecovering, onRetry: () => agent.reconnect() }));
+    const composerPlaceholder = match({ hasPendingQuestionnaire, ruleEditContext, isRuleCreateContext })
+        .with({ hasPendingQuestionnaire: true }, () => "Answer or skip the questions above to continue.")
+        .with({ ruleEditContext: P.nonNullable }, () => "Describe the change you'd like to make to this rule…")
+        .with({ isRuleCreateContext: true }, () => "Describe the rule you'd like to create…")
+        .otherwise(() => `Ask me anything about ${datastoreName ?? "your datastore"}...`);
+    const chatPanel = (_jsx("div", { ref: dropZoneRef, className: "relative h-full w-full min-w-0", children: _jsx("div", { ref: chatPanelRef, className: "h-full w-full overflow-y-auto overscroll-contain bg-base-background", children: _jsx(Conversation, { scrollRef: chatPanelRef, children: _jsxs("div", { className: "min-h-full flex flex-col", children: [_jsxs("div", { className: "sticky top-0 z-20", children: [connectionNotice, isCopilot && (_jsx(CopilotHeader, { isOperator: isOperator, datastoreId: datastore?.id, onClear: chatData?.clearHistory, onClose: onCloseAction, conversationId: activeConversation?.id, messages: chatData?.messages ?? [], isEmbedded: isEmbedded, renderMenuItems: renderMenuItems, title: title })), !isCopilot && ruleEditContext && (_jsx(RuleEditBanner, { ruleIri: ruleEditContext.ruleIri, ruleName: ruleEditName, onExit: () => startNewChat() }))] }), showGraphContextPanel && (_jsx("div", { className: "sticky top-0 z-10 h-0", children: _jsx(GraphContextPanel, { mergedGraph: graphContext.mergedGraph, graphCount: graphContext.graphCount, nodeCount: graphContext.nodeCount, sparqlQueries: graphContext.sparqlQueries }) })), _jsxs("div", { className: "flex-1 flex flex-col min-h-0", children: [!hasMessages && (_jsx("div", { "data-testid": "chat-welcome", className: "flex-1 flex flex-col items-center justify-center px-6 py-12", children: _jsxs("div", { className: "w-full max-w-4xl space-y-8 text-center", children: [_jsx(ChatWelcome, { channel: "MANTA", title: welcome.title, subtitle: welcome.subtitle, mark: mark }), _jsx(ConversationStarters, { onSubmit: handleConversationStarterSubmit, disabled: isChatInputDisabled })] }) })), hasMessages && (_jsx(MessagesContainer, { messages: displayMessages, toolsUsedInSession: toolsUsedInSession, onAddToolResult: addToolResult || (() => { }), status: status, thinkingSeconds: thinkingSeconds, activeTurnKey: activeTurnKey, compact: isCopilot, animateOnMount: !hasPendingMessage, turnError: turnError, onRetryTurn: () => void handleRetryTurn(), onStartNewChat: startNewChat }))] }), _jsxs("div", { className: cn("sticky bottom-0 z-20 py-2 px-4 space-y-2 w-full bg-base-background", !isCopilot && "max-w-3xl mx-auto", isCopilot && "pb-4"), children: [hasMessages && (_jsx("div", { className: "pointer-events-none absolute -top-10 left-0 right-0 h-10 bg-linear-to-t from-base-background to-transparent" })), _jsx(ConversationScrollButton, { className: "absolute -top-12 left-1/2 -translate-x-1/2 z-30" }), !isEmbedded && latestShowcase && (_jsx(ReviewCta, { title: humanizePlanName(latestShowcase.planName), subtitle: planStatusLabel(latestShowcase.status), className: "plan-badge-border gap-4 px-4 py-2 rounded-full", onClick: () => void handleSelectPlan(latestShowcase.planIri) })), !isEmbedded && isRuleCreateContext && _jsx(StagedRuleCta, { messages: agentMessages }), _jsxs(ChatInput, { dropTargetRef: dropZoneRef, onSubmit: isChatInputDisabled ? undefined : handleAgentSubmit, onRejected: handleFilesRejected, topContent: _jsx(ChatInputFilePreview, { progress: uploadProgress }), children: [!hasPendingQuestionnaire && _jsx(ChatInputAttachButton, {}), _jsx(ChatInputTextarea, { placeholder: composerPlaceholder, className: "pl-5", autoFocus: shouldAutoFocusInput, disabled: hasPendingQuestionnaire, "data-chat-input": true }), _jsx(ChatInputSubmit, { icon: ArrowUp, "aria-label": "Send", isLoading: isUploading, disabled: isChatInputDisabled, stopGeneration: !isResumeProbe && (isChatStreaming || chatStatus === "submitted") ? stop : undefined })] }), !isCopilot && (_jsx(ChatInputFooter, { infoText: "Manta can make mistakes.", version: kg.knowledgeGraphState?.dataVersion?.uniqueId ?? "unknown", circularProgressTooltip: "Context used (tokens)", min: agentState?.contextTokens ?? 0, max: contextWindow, actions: _jsxs(_Fragment, { children: [isOperator && modelPickerOptions.length > 1 && (_jsx(ChatModelPicker, { models: modelPickerOptions, selectedId: selectedModel, onChange: setSelectedModel })), showDebugMessages && _jsx(DebugMessagesButton, { messages: agentMessages })] }) }))] })] }) }) }) }));
+    if (isConnectingOrSyncing) {
+        return (_jsxs("div", { className: "relative", children: [_jsx(LoadingView, {}), activeChat?.connectionState === "closed" && (_jsx("div", { className: "absolute inset-x-0 top-0 z-20", children: connectionNotice }))] }));
+    }
+    if (isCopilot)
+        return chatPanel;
+    return (_jsx("div", { className: "flex flex-col h-full overflow-hidden", children: _jsx("div", { className: "flex-1 min-h-0 overflow-hidden", children: chatPanel }) }));
+}

package/dist/components/chat-view/ChatFeedback.d.ts

@@ -0,0 +1,8 @@
+import type { ChatUIMessage } from "@manta-eu/client/shared/index";
+type ChatFeedbackProps = {
+    message: ChatUIMessage;
+    isLastAssistantMessage?: boolean;
+};
+export declare function ChatFeedback(props: ChatFeedbackProps): import("react/jsx-runtime").JSX.Element | null;
+export {};
+//# sourceMappingURL=ChatFeedback.d.ts.map

package/dist/components/chat-view/ChatFeedback.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatFeedback.d.ts","sourceRoot":"","sources":["../../../src/components/chat-view/ChatFeedback.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAmCnE,KAAK,iBAAiB,GAAG;IACvB,OAAO,EAAE,aAAa,CAAC;IACvB,sBAAsB,CAAC,EAAE,OAAO,CAAC;CAClC,CAAC;AAEF,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,kDAgKpD"}

package/dist/components/chat-view/ChatFeedback.js

@@ -0,0 +1,82 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { usePostHog } from "@posthog/react";
+import { Copy, ThumbsDown, ThumbsUp } from "lucide-react";
+import { isNil } from "ramda";
+import { useEffect, useRef, useState } from "react";
+import { Textarea } from "../textarea/Textarea.js";
+import { Button } from "#components/button/index";
+import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from "#components/modal/index";
+import { Tooltip, TooltipContent, TooltipTrigger } from "#components/tooltip/index";
+import { useCopyToClipboard } from "#lib/use-copy-clipboard";
+import { cn } from "#lib/utils";
+const chatFeedbackSurveyId = "019c6c27-e58d-0000-42cf-e89e99ad243e";
+function usePosthogSurveys() {
+    const posthog = usePostHog();
+    const [surveys, setSurveys] = useState([]);
+    useEffect(() => {
+        posthog.getSurveys((newSurveys) => {
+            setSurveys(newSurveys);
+        });
+    }, [posthog]);
+    return surveys;
+}
+export function ChatFeedback(props) {
+    const { message, isLastAssistantMessage } = props;
+    const traceId = message?.metadata?.traceId;
+    const [isOpen, setIsOpen] = useState(false);
+    const { copyToClipboard } = useCopyToClipboard();
+    const posthog = usePostHog();
+    const surveys = usePosthogSurveys();
+    const survey = surveys.find((survey) => survey.id === chatFeedbackSurveyId);
+    const [thumb, setThumb] = useState(null);
+    const feedbackRef = useRef(null);
+    const [submitted, setSubmitted] = useState(false);
+    function handleRespond(value) {
+        setThumb(value);
+    }
+    function handleSubmit() {
+        const responseId = thumb === "up" ? survey?.questions[0]?.id : survey?.questions[1]?.id;
+        const surveyResponseId = `$survey_response_${responseId}`;
+        posthog.capture("survey sent", {
+            $ai_trace_id: traceId,
+            $survey_id: chatFeedbackSurveyId,
+            [surveyResponseId]: feedbackRef.current?.value,
+        });
+        setSubmitted(true);
+        if (feedbackRef.current) {
+            feedbackRef.current.value = "";
+        }
+    }
+    function handleDismiss() {
+        posthog.capture("survey dismissed", { $survey_id: chatFeedbackSurveyId });
+    }
+    function handleOpenChange(open) {
+        setIsOpen(open);
+        if (!open && !submitted) {
+            handleDismiss();
+            setThumb(null);
+        }
+    }
+    if (!survey)
+        return null;
+    const container = document.getElementById("manta-embed");
+    return (_jsxs("div", { className: cn("opacity-0 duration-200 transition-opacity", isLastAssistantMessage ? "opacity-100" : "group-hover:opacity-100"), children: [_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { "aria-label": "Copy", variant: "ghost", size: "xs", iconOnly: true, icon: Copy, onClick: () => {
+                                const copyableMessage = message.parts
+                                    ?.filter((part) => part.type === "text" && !isNil(part.text))
+                                    .map((part) => part.text)
+                                    .join("\n");
+                                void copyToClipboard(copyableMessage);
+                            } }) }), _jsx(TooltipContent, { container: container, side: "bottom", children: "Copy" })] }), _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { "aria-label": "Thumbs up", variant: thumb === "up" ? "secondary" : "ghost", size: "xs", iconOnly: true, icon: ThumbsUp, onClick: () => {
+                                handleRespond("up");
+                                setIsOpen(true);
+                            } }) }), _jsx(TooltipContent, { container: container, side: "bottom", children: "Give positive feedback" })] }), _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { "aria-label": "Thumbs down", variant: thumb === "down" ? "secondary" : "ghost", size: "xs", iconOnly: true, icon: ThumbsDown, onClick: () => {
+                                handleRespond("down");
+                                setIsOpen(true);
+                            } }) }), _jsx(TooltipContent, { container: container, side: "bottom", children: "Give negative feedback" })] }), _jsx(Dialog, { open: isOpen, onOpenChange: handleOpenChange, modal: true, children: _jsxs(DialogContent, { className: "gap-8 flex flex-col overflow-hidden", showCloseButton: true, children: [_jsx(DialogHeader, { className: "p-0 shrink-0", children: _jsx(DialogTitle, { text: "Feedback" }) }), _jsxs("div", { className: "grid min-h-0 gap-1.5 overflow-hidden p-0", children: [_jsx("p", { className: "typography-caption", children: "Want to add more details? (optional)" }), _jsx(Textarea, { placeholder: thumb === "up" ? "What worked well?" : "What could be better?", className: "resize-none p-3! border border-default-border rounded-md-v4 typography-caption", ref: feedbackRef }), _jsx("p", { className: "typography-small", children: "Your feedback helps improve future suggestions." })] }), _jsxs(DialogFooter, { className: "shrink-0", children: [_jsx(Button, { variant: "secondary", onClick: () => {
+                                        handleDismiss();
+                                        setIsOpen(false);
+                                    }, children: "Cancel" }), _jsx(Button, { variant: "primary", onClick: () => {
+                                        handleSubmit();
+                                        setIsOpen(false);
+                                    }, children: "Submit" })] })] }) })] }));
+}

package/dist/components/chat-view/ChatHeaders.d.ts

@@ -0,0 +1,25 @@
+import { type ChatUIMessage } from "@manta-eu/client/shared/index";
+import type { ReactNode } from "react";
+import type { CopilotMenuDefaults } from "#lib/chat-types";
+type RuleEditBannerProps = {
+    ruleIri: string;
+    ruleName?: string;
+    onExit: () => void;
+    className?: string;
+};
+export declare function RuleEditBanner(props: RuleEditBannerProps): import("react/jsx-runtime").JSX.Element;
+type CopilotHeaderProps = {
+    isOperator: boolean;
+    datastoreId?: string;
+    onClear?: () => void;
+    onClose?: () => void;
+    conversationId?: string;
+    messages: ChatUIMessage[];
+    isEmbedded?: boolean;
+    renderMenuItems?: (defaults: CopilotMenuDefaults) => ReactNode[];
+    className?: string;
+    title?: string;
+};
+export declare function CopilotHeader(props: CopilotHeaderProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ChatHeaders.d.ts.map

package/dist/components/chat-view/ChatHeaders.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatHeaders.d.ts","sourceRoot":"","sources":["../../../src/components/chat-view/ChatHeaders.tsx"],"names":[],"mappings":"AACA,OAAO,EAAgB,KAAK,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAIjF,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAMvC,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAK3D,KAAK,mBAAmB,GAAG;IACzB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,2CA8BxD;AAED,KAAK,kBAAkB,GAAG;IACxB,UAAU,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,EAAE,aAAa,EAAE,CAAC;IAC1B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,eAAe,CAAC,EAAE,CAAC,QAAQ,EAAE,mBAAmB,KAAK,SAAS,EAAE,CAAC;IACjE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAQF,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,2CA8FtD"}

package/dist/components/chat-view/ChatHeaders.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { withDatastorePrefix } from "@manta-eu/client/shared/datastore-path";
+import { chatIdToPath } from "@manta-eu/client/shared/index";
+import { isPresent } from "@manta-eu/lib/present";
+import { Bug, Ellipsis, ExternalLink, Trash2, X } from "lucide-react";
+import { useCallback, useState } from "react";
+import { Link } from "react-router";
+import { DebugMessagesDialog } from "./DebugMessagesButton.js";
+import { Button } from "#components/button/index";
+import { Dropdown, DropdownContent, DropdownItem, DropdownTrigger } from "#components/dropdown/index";
+import { isDevBuild } from "#lib/build-config";
+import { cn } from "#lib/utils";
+import { useMantaClient } from "#providers/index";
+import { getRuleDisplayName, getRuleHref } from "#routes/rules/components/rules.utils";
+export function RuleEditBanner(props) {
+    const { ruleIri, ruleName, onExit, className } = props;
+    const displayName = ruleName ?? getRuleDisplayName(ruleIri);
+    return (_jsxs("div", { className: cn("shrink-0 flex h-12 items-center justify-between gap-3 border-b border-default-border bg-base-background px-4", className), children: [_jsxs("span", { className: "typography-small text-muted-foreground truncate", children: ["Editing rule", " ", _jsx(Link, { to: getRuleHref({ ruleIri }), className: "text-default-foreground hover:underline", children: displayName })] }), _jsx(Button, { type: "button", variant: "ghost", size: "sm", rounded: "md", iconOnly: true, icon: X, "aria-label": "Exit rule edit", onClick: onExit, className: "text-muted-foreground hover:text-default-foreground" })] }));
+}
+const defaultCopilotTitle = "Manta Co-pilot";
+function defaultCopilotMenuItems(defaults) {
+    return [defaults.openInManta, defaults.debugMessages, defaults.clearChat];
+}
+export function CopilotHeader(props) {
+    const { isOperator, datastoreId, onClear, onClose, conversationId, messages, isEmbedded, renderMenuItems = defaultCopilotMenuItems, className, title, } = props;
+    const { mantaBaseUrl, datastorePath } = useMantaClient();
+    const [debugOpen, setDebugOpen] = useState(false);
+    const canClear = Boolean(conversationId && isPresent(messages) && onClear);
+    const showDebugMessages = isOperator || isDevBuild;
+    const handleOpenInManta = useCallback(() => {
+        const path = conversationId ? chatIdToPath(conversationId) : "/";
+        const scopedPath = datastoreId ? withDatastorePrefix(datastoreId, path) : datastorePath(path);
+        const url = new URL(scopedPath, mantaBaseUrl.origin);
+        window.open(url.toString(), "_blank");
+    }, [mantaBaseUrl, datastorePath, datastoreId, conversationId]);
+    const menuItems = renderMenuItems({
+        openInManta: isEmbedded ? (_jsx(DropdownItem, { icon: _jsx(ExternalLink, { className: "size-4" }), onClick: handleOpenInManta, children: "Open in Manta" }, "open-in-manta")) : null,
+        debugMessages: showDebugMessages ? (_jsx(DropdownItem, { icon: _jsx(Bug, { className: "size-4" }), onClick: () => setDebugOpen(true), children: "Debug messages" }, "debug-messages")) : null,
+        clearChat: canClear ? (_jsx(DropdownItem, { icon: _jsx(Trash2, { className: "size-4" }), onClick: onClear, className: "text-error-foreground", children: "Clear chat" }, "clear-chat")) : null,
+    }).filter(isPresent);
+    return (_jsxs("div", { className: cn("shrink-0 flex h-16 items-center justify-between border-b border-default-border bg-base-background px-6", className), children: [_jsx("span", { className: "typography-small-medium text-default-foreground", children: isPresent(title) ? title : defaultCopilotTitle }), _jsxs("div", { className: "flex items-center gap-2", children: [isPresent(menuItems) && (_jsxs(Dropdown, { children: [_jsx(DropdownTrigger, { asChild: true, children: _jsx(Button, { type: "button", variant: "ghost", size: "sm", rounded: "md", iconOnly: true, icon: Ellipsis, "aria-label": "Open menu", className: "text-muted-foreground hover:text-default-foreground" }) }), _jsx(DropdownContent, { align: "end", children: menuItems })] })), onClose && (_jsx(Button, { type: "button", variant: "ghost", size: "sm", rounded: "md", iconOnly: true, icon: X, "aria-label": "Close", onClick: onClose, className: "text-muted-foreground hover:text-default-foreground" }))] }), _jsx(DebugMessagesDialog, { messages: messages, open: debugOpen, onOpenChange: setDebugOpen })] }));
+}

package/dist/components/chat-view/ChatMarkdownImage.d.ts

@@ -0,0 +1,3 @@
+import { type ComponentPropsWithoutRef } from "react";
+export declare function ChatMarkdownImage(props: ComponentPropsWithoutRef<"img">): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ChatMarkdownImage.d.ts.map

package/dist/components/chat-view/ChatMarkdownImage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatMarkdownImage.d.ts","sourceRoot":"","sources":["../../../src/components/chat-view/ChatMarkdownImage.tsx"],"names":[],"mappings":"AACA,OAAO,EAAuB,KAAK,wBAAwB,EAAE,MAAM,OAAO,CAAC;AAE3E,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,wBAAwB,CAAC,KAAK,CAAC,2CAkBvE"}

package/dist/components/chat-view/ChatMarkdownImage.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ImageOff } from "lucide-react";
+import { useEffect, useState } from "react";
+export function ChatMarkdownImage(props) {
+    const { src, alt, ...rest } = props;
+    const [hasError, setHasError] = useState(false);
+    useEffect(() => {
+        setHasError(false);
+    }, [src]);
+    if (!src || hasError) {
+        return (_jsxs("span", { className: "inline-flex items-center gap-1.5 px-2 py-1 rounded-md bg-muted text-muted-foreground typography-tiny align-middle", children: [_jsx(ImageOff, { size: 14 }), _jsx("span", { children: alt || "Image unavailable" })] }));
+    }
+    return _jsx("img", { src: src, alt: alt, onError: () => setHasError(true), ...rest });
+}

package/dist/components/chat-view/ChatMermaidFallback.d.ts

@@ -0,0 +1,3 @@
+import type { MermaidErrorComponentProps } from "streamdown";
+export declare function ChatMermaidFallback(props: MermaidErrorComponentProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ChatMermaidFallback.d.ts.map

package/dist/components/chat-view/ChatMermaidFallback.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatMermaidFallback.d.ts","sourceRoot":"","sources":["../../../src/components/chat-view/ChatMermaidFallback.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,YAAY,CAAC;AAG7D,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,0BAA0B,2CAEpE"}

package/dist/components/chat-view/ChatMermaidFallback.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { RawContentFallback } from "./RawContentFallback.js";
+export function ChatMermaidFallback(props) {
+    return _jsx(RawContentFallback, { text: props.chart, notice: "This diagram can't be displayed", testId: "mermaid-fallback" });
+}

package/dist/components/chat-view/ChatTurnErrorNotice.d.ts

@@ -0,0 +1,7 @@
+export type ChatTurnErrorNoticeProps = {
+    error: unknown;
+    onRetry: () => void;
+    onStartNewChat: () => void;
+};
+export declare function ChatTurnErrorNotice(props: ChatTurnErrorNoticeProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ChatTurnErrorNotice.d.ts.map

package/dist/components/chat-view/ChatTurnErrorNotice.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatTurnErrorNotice.d.ts","sourceRoot":"","sources":["../../../src/components/chat-view/ChatTurnErrorNotice.tsx"],"names":[],"mappings":"AASA,MAAM,MAAM,wBAAwB,GAAG;IACrC,KAAK,EAAE,OAAO,CAAC;IACf,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,cAAc,EAAE,MAAM,IAAI,CAAC;CAC5B,CAAC;AAwBF,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,wBAAwB,2CAmBlE"}

package/dist/components/chat-view/ChatTurnErrorNotice.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { chatTurnErrorMessages, resolveChatTurnErrorMessage, } from "@manta-eu/client/shared/chat-turn-errors";
+import { match } from "ts-pattern";
+import { Banner } from "#components/banner/index";
+import { useAssistantName } from "#providers/AssistantNameProvider";
+function resolveErrorAction(message, actions) {
+    return match(message)
+        .with(chatTurnErrorMessages.conversationScope, chatTurnErrorMessages.contextOverflow, () => ({
+        label: "Start new chat",
+        run: actions.onStartNewChat,
+    }))
+        .with(chatTurnErrorMessages.messageNotSaved, () => undefined)
+        .with(chatTurnErrorMessages.unexpected, () => ({
+        label: "Try again",
+        run: actions.onRetry,
+    }))
+        .exhaustive();
+}
+export function ChatTurnErrorNotice(props) {
+    const { error, onRetry, onStartNewChat } = props;
+    const assistantName = useAssistantName();
+    const message = resolveChatTurnErrorMessage(error);
+    const action = resolveErrorAction(message, { onRetry, onStartNewChat });
+    return (_jsx("div", { className: "w-full max-w-[90%]", "data-testid": "chat-turn-error-notice", children: _jsx(Banner, { type: "error", size: "loose", label: `${assistantName} couldn't respond`, description: message, actionLabel: action?.label, onAction: action?.run }) }));
+}