feat: complete rsf-design phase 1 integration

zhou zhou

6 天以前 40905cbd04c2e332cd4bc2b9e0c5b3e1da9cccfa

 rsf-admin/src/layout/AiChatDrawer.jsx

@@ -1,6 +1,8 @@
import React, { useEffect, useMemo, useRef, useState } from "react";
import { useLocation, useNavigate } from "react-router-dom";
import { useNotify, useTranslate } from "react-admin";
import ReactMarkdown from "react-markdown";
import remarkGfm from "remark-gfm";
import {
    Alert,
    Box,
@@ -17,11 +19,14 @@
    List,
    ListItemButton,
    ListItemText,
    MenuItem,
    Paper,
    Stack,
    TextField,
    Typography,
} from "@mui/material";
import { Light as SyntaxHighlighter } from "react-syntax-highlighter";
import { atomOneLight } from "react-syntax-highlighter/dist/esm/styles/hljs";
import SmartToyOutlinedIcon from "@mui/icons-material/SmartToyOutlined";
import SendRoundedIcon from "@mui/icons-material/SendRounded";
import StopCircleOutlinedIcon from "@mui/icons-material/StopCircleOutlined";
@@ -42,6 +47,178 @@
import { clearAiSessionMemory, getAiRuntime, getAiSessions, pinAiSession, removeAiSession, renameAiSession, retainAiSessionLatestRound, streamAiChat } from "@/api/ai/chat";

const DEFAULT_PROMPT_CODE = "home.default";
const AI_CHAT_DRAWER_Z_INDEX = 1400;
const AI_CHAT_DIALOG_Z_INDEX = AI_CHAT_DRAWER_Z_INDEX + 20;

const normalizeMarkdownContent = (content) => {
    if (!content) {
        return "";
    }
    return content
        .replace(/\r\n/g, "\n")
        .replace(/(\n[-*] .+)\n{2,}(?=[-*] )/g, "$1\n")
        .replace(/(\n\d+\. .+)\n{2,}(?=\d+\. )/g, "$1\n")
        .replace(/([^\n])\n{3,}/g, "$1\n\n");
};

const markdownSx = {
    width: "100%",
    fontSize: "0.84rem",
    "& > *:first-of-type": {
        mt: 0,
    },
    "& > *:last-child": {
        mb: 0,
    },
    "& p": {
        m: 0,
        lineHeight: 1.28,
    },
    "& p + p": {
        mt: 0.1,
    },
    "& h1, & h2, & h3, & h4, & h5, & h6": {
        mt: 0.25,
        mb: 0.04,
        lineHeight: 1.16,
        fontWeight: 700,
    },
    "& h1": {
        fontSize: "0.96rem",
    },
    "& h2": {
        fontSize: "0.92rem",
    },
    "& h3": {
        fontSize: "0.89rem",
    },
    "& ul, & ol": {
        my: 0.02,
        pl: 1.3,
    },
    "& ul > li, & ol > li": {
        lineHeight: 1.2,
    },
    "& li + li": {
        mt: 0,
    },
    "& li > p": {
        display: "inline",
        m: 0,
        lineHeight: "inherit",
    },
    "& li::marker": {
        fontSize: "0.78rem",
    },
    "& blockquote": {
        m: 0,
        mt: 0.18,
        px: 0.7,
        py: 0.25,
        borderLeft: "3px solid rgba(25, 118, 210, 0.35)",
        bgcolor: "rgba(25, 118, 210, 0.06)",
    },
    "& hr": {
        my: 0.25,
        border: 0,
        borderTop: "1px solid rgba(0, 0, 0, 0.12)",
    },
    "& table": {
        width: "100%",
        borderCollapse: "collapse",
        mt: 0.18,
        mb: 0.04,
        fontSize: "0.78rem",
    },
    "& th, & td": {
        border: "1px solid rgba(0, 0, 0, 0.12)",
        px: 0.4,
        py: 0.22,
        textAlign: "left",
        verticalAlign: "top",
    },
    "& th": {
        bgcolor: "rgba(0, 0, 0, 0.04)",
        fontWeight: 700,
    },
    "& a": {
        color: "primary.main",
        textDecoration: "underline",
        wordBreak: "break-all",
    },
    "& img": {
        maxWidth: "100%",
        borderRadius: 1.5,
    },
    "& code": {
        fontFamily: "'Consolas', 'Monaco', monospace",
    },
};

const AiMarkdownContent = ({ content }) => (
    <Box sx={markdownSx}>
        <ReactMarkdown
            remarkPlugins={[remarkGfm]}
            components={{
                p: ({ children }) => <Typography variant="body2">{children}</Typography>,
                li: ({ children }) => <Box component="li" sx={{ fontSize: "0.875rem" }}>{children}</Box>,
                blockquote: ({ children }) => <Box component="blockquote">{children}</Box>,
                a: ({ href, children }) => (
                    <Box
                        component="a"
                        href={href}
                        target="_blank"
                        rel="noreferrer"
                    >
                        {children}
                    </Box>
                ),
                code({ inline, className, children, ...props }) {
                    const match = /language-(\w+)/.exec(className || "");
                    const code = String(children).replace(/\n$/, "");
                    if (!inline) {
                        return (
                            <Box sx={{ mt: 0.7, mb: 0.2, borderRadius: 1.5, overflow: "hidden" }}>
                                <SyntaxHighlighter
                                    language={match?.[1]}
                                    style={atomOneLight}
                                    customStyle={{
                                        margin: 0,
                                        padding: "6px 8px",
                                        borderRadius: 12,
                                        fontSize: "0.74rem",
                                    }}
                                    wrapLongLines
                                    PreTag="div"
                                    {...props}
                                >
                                    {code}
                                </SyntaxHighlighter>
                            </Box>
                        );
                    }
                    return (
                        <Box
                            component="code"
                            sx={{
                                px: 0.45,
                                py: "1px",
                                borderRadius: 0.75,
                                bgcolor: "rgba(0, 0, 0, 0.08)",
                                fontSize: "0.74em",
                            }}
                            {...props}
                        >
                            {children}
                        </Box>
                    );
                },
            }}
        >
            {normalizeMarkdownContent(content)}
        </ReactMarkdown>
    </Box>
);

const AiChatDrawer = ({ open, onClose }) => {
    const navigate = useNavigate();
@@ -52,12 +229,13 @@
    const messagesContainerRef = useRef(null);
    const messagesBottomRef = useRef(null);
    const [runtime, setRuntime] = useState(null);
    const [selectedAiParamId, setSelectedAiParamId] = useState(null);
    const [sessionId, setSessionId] = useState(null);
    const [sessions, setSessions] = useState([]);
    const [persistedMessages, setPersistedMessages] = useState([]);
    const [messages, setMessages] = useState([]);
    const [toolEvents, setToolEvents] = useState([]);
    const [expandedToolIds, setExpandedToolIds] = useState([]);
    const [traceEvents, setTraceEvents] = useState([]);
    const [expandedTraceIds, setExpandedTraceIds] = useState([]);
    const [input, setInput] = useState("");
    const [loadingRuntime, setLoadingRuntime] = useState(false);
    const [streaming, setStreaming] = useState(false);
@@ -65,6 +243,7 @@
    const [drawerError, setDrawerError] = useState("");
    const [sessionKeyword, setSessionKeyword] = useState("");
    const [renameDialog, setRenameDialog] = useState({ open: false, sessionId: null, title: "" });
    const [runtimePanelExpanded, setRuntimePanelExpanded] = useState(false);

    const quickLinks = useMemo(() => ([
        { label: translate("menu.aiParam"), path: "/aiParam", icon: <SettingsSuggestOutlinedIcon fontSize="small" /> },
@@ -73,6 +252,20 @@
    ]), [translate]);

    const promptCode = runtime?.promptCode || DEFAULT_PROMPT_CODE;
    const selectableModelOptions = useMemo(() => {
        if (runtime?.modelOptions?.length) {
            return runtime.modelOptions;
        }
        if (runtime?.model) {
            return [{
                aiParamId: runtime?.aiParamId ?? "CURRENT_MODEL",
                name: runtime.model,
                model: runtime.model,
                active: true,
            }];
        }
        return [];
    }, [runtime]);

    const runtimeSummary = useMemo(() => {
        return {
@@ -88,6 +281,7 @@

    useEffect(() => {
        if (open) {
            setRuntimePanelExpanded(false);
            initializeDrawer();
        } else {
            stopStream(false);
@@ -109,27 +303,30 @@
    }, [open, messages, streaming]);

    const initializeDrawer = async (targetSessionId = null) => {
        setToolEvents([]);
        setExpandedToolIds([]);
        setTraceEvents([]);
        setExpandedTraceIds([]);
        await Promise.all([
            loadRuntime(targetSessionId),
            loadSessions(sessionKeyword),
        ]);
    };

    const loadRuntime = async (targetSessionId = null) => {
    const loadRuntime = async (targetSessionId = null, targetAiParamId = selectedAiParamId) => {
        setLoadingRuntime(true);
        setDrawerError("");
        try {
            const data = await getAiRuntime(DEFAULT_PROMPT_CODE, targetSessionId);
            const data = await getAiRuntime(DEFAULT_PROMPT_CODE, targetSessionId, targetAiParamId);
            const historyMessages = data?.persistedMessages || [];
            setRuntime(data);
            setSelectedAiParamId(data?.aiParamId ?? null);
            setSessionId(data?.sessionId || null);
            setPersistedMessages(historyMessages);
            setMessages(historyMessages);
            return data;
        } catch (error) {
            const message = error.message || translate("ai.drawer.runtimeFailed");
            setDrawerError(message);
            return null;
        } finally {
            setLoadingRuntime(false);
        }
@@ -152,8 +349,8 @@
        setSessionId(null);
        setPersistedMessages([]);
        setMessages([]);
        setToolEvents([]);
        setExpandedToolIds([]);
        setTraceEvents([]);
        setExpandedTraceIds([]);
        setUsage(null);
        setDrawerError("");
    };
@@ -173,9 +370,27 @@
            return;
        }
        setUsage(null);
        setToolEvents([]);
        setExpandedToolIds([]);
        setTraceEvents([]);
        setExpandedTraceIds([]);
        await loadRuntime(targetSessionId);
    };

    const handleModelChange = async (event) => {
        if (streaming) {
            return;
        }
        const rawValue = event.target.value;
        const nextAiParamId = rawValue === "" ? null : Number(rawValue);
        if (nextAiParamId === selectedAiParamId) {
            return;
        }
        const previousAiParamId = selectedAiParamId;
        setSelectedAiParamId(nextAiParamId);
        const data = await loadRuntime(sessionId, nextAiParamId);
        if (!data) {
            setSelectedAiParamId(previousAiParamId);
            notify(translate("ai.drawer.modelSwitchFailed"), { type: "error" });
        }
    };

    const handleDeleteSession = async (targetSessionId) => {
@@ -322,14 +537,16 @@
        return next;
    };

    const upsertToolEvent = (payload) => {
        if (!payload?.toolCallId) {
    const appendTraceEvent = (payload) => {
        if (!payload?.traceId) {
            return;
        }
        setToolEvents((prev) => {
            const index = prev.findIndex((item) => item.toolCallId === payload.toolCallId);
        setTraceEvents((prev) => {
            const index = prev.findIndex((item) => item.traceId === payload.traceId);
            if (index < 0) {
                return [...prev, payload];
                return [...prev, payload].sort((left, right) => (
                    (left?.sequence ?? 0) - (right?.sequence ?? 0)
                ));
            }
            const next = [...prev];
            next[index] = { ...next[index], ...payload };
@@ -337,15 +554,41 @@
        });
    };

    const toggleToolEventExpanded = (toolCallId) => {
        if (!toolCallId) {
    const toggleTraceEventExpanded = (traceId) => {
        if (!traceId) {
            return;
        }
        setExpandedToolIds((prev) => (
            prev.includes(toolCallId)
                ? prev.filter((item) => item !== toolCallId)
                : [...prev, toolCallId]
        setExpandedTraceIds((prev) => (
            prev.includes(traceId)
                ? prev.filter((item) => item !== traceId)
                : [...prev, traceId]
        ));
    };

    const getThinkingStatusLabel = (status) => {
        if (status === "COMPLETED") {
            return translate("ai.drawer.thinkingStatusCompleted");
        }
        if (status === "FAILED") {
            return translate("ai.drawer.thinkingStatusFailed");
        }
        if (status === "ABORTED") {
            return translate("ai.drawer.thinkingStatusAborted");
        }
        if (status === "UPDATED") {
            return translate("ai.drawer.thinkingStatusUpdated");
        }
        return translate("ai.drawer.thinkingStatusStarted");
    };

    const getToolStatusLabel = (status) => {
        if (status === "FAILED") {
            return translate("ai.drawer.toolStatusFailed");
        }
        if (status === "COMPLETED") {
            return translate("ai.drawer.toolStatusCompleted");
        }
        return translate("ai.drawer.toolStatusRunning");
    };

    const handleSend = async () => {
@@ -358,8 +601,8 @@
        setInput("");
        setUsage(null);
        setDrawerError("");
        setToolEvents([]);
        setExpandedToolIds([]);
        setTraceEvents([]);
        setExpandedTraceIds([]);
        setMessages(ensureAssistantPlaceholder(nextMessages));
        setStreaming(true);

@@ -368,11 +611,13 @@

        let completed = false;
        let completedSessionId = sessionId;
        let completedAiParamId = selectedAiParamId;

        try {
            await streamAiChat(
                {
                    sessionId,
                    aiParamId: selectedAiParamId,
                    promptCode,
                    messages: memoryMessages,
                    metadata: {
@@ -384,16 +629,18 @@
                    onEvent: (eventName, payload) => {
                        if (eventName === "start") {
                            setRuntime(payload);
                            setSelectedAiParamId(payload?.aiParamId ?? null);
                            if (payload?.sessionId) {
                                setSessionId(payload.sessionId);
                                completedSessionId = payload.sessionId;
                            }
                            completedAiParamId = payload?.aiParamId ?? completedAiParamId;
                        }
                        if (eventName === "delta") {
                            appendAssistantDelta(payload?.content || "");
                        }
                        if (eventName === "tool_start" || eventName === "tool_result" || eventName === "tool_error") {
                            upsertToolEvent(payload);
                        if (eventName === "trace") {
                            appendTraceEvent(payload);
                        }
                        if (eventName === "done") {
                            setUsage(payload);
@@ -422,7 +669,7 @@
            setStreaming(false);
            if (completed) {
                await Promise.all([
                    loadRuntime(completedSessionId),
                    loadRuntime(completedSessionId, completedAiParamId),
                    loadSessions(sessionKeyword),
                ]);
            }
@@ -443,7 +690,7 @@
            onClose={onClose}
            ModalProps={{ keepMounted: true }}
            sx={{
                zIndex: 1400,
                zIndex: AI_CHAT_DRAWER_Z_INDEX,
                "& .MuiDrawer-paper": {
                    top: 0,
                    height: "100vh",
@@ -577,71 +824,106 @@
                    >
                        <Box px={2} py={1.5} display="flex" flexDirection="column" minHeight={0}>
                            <Typography variant="subtitle2" mb={1}>
                                {translate("ai.drawer.toolTrace")}
                                {translate("ai.drawer.activityTrace")}
                            </Typography>
                            <Paper variant="outlined" sx={{ flex: 1, minHeight: { xs: 140, md: 0 }, overflow: "hidden", bgcolor: "grey.50" }}>
                                {!toolEvents.length ? (
                                {!traceEvents.length ? (
                                    <Box px={1.5} py={1.25}>
                                        <Typography variant="body2" color="text.secondary">
                                            {translate("ai.drawer.noToolTrace")}
                                            {translate("ai.drawer.noActivityTrace")}
                                        </Typography>
                                    </Box>
                                ) : (
                                    <Stack spacing={1} sx={{ p: 1.25, maxHeight: { xs: 220, md: "calc(100vh - 180px)" }, overflow: "auto" }}>
                                        {toolEvents.map((item) => (
                                        {traceEvents.map((item) => (
                                            <Paper
                                                key={item.toolCallId}
                                                key={item.traceId}
                                                variant="outlined"
                                                sx={{
                                                    p: 1.25,
                                                    bgcolor: item.status === "FAILED" ? "error.lighter" : "common.white",
                                                    borderColor: item.status === "FAILED" ? "error.light" : "divider",
                                                    bgcolor: item.status === "FAILED"
                                                        ? "error.lighter"
                                                        : item.traceType === "thinking"
                                                            ? "info.lighter"
                                                            : "common.white",
                                                    borderColor: item.status === "FAILED"
                                                        ? "error.light"
                                                        : item.traceType === "thinking"
                                                            ? "info.light"
                                                            : "divider",
                                                }}
                                            >
                                                <Stack direction="row" spacing={1} alignItems="center" flexWrap="wrap" useFlexGap>
                                                    <Chip
                                                        size="small"
                                                        variant="outlined"
                                                        color={item.traceType === "thinking" ? "info" : "primary"}
                                                        label={translate(item.traceType === "thinking" ? "ai.drawer.traceTypeThinking" : "ai.drawer.traceTypeTool")}
                                                    />
                                                    <Typography variant="body2" fontWeight={700}>
                                                        {item.toolName || translate("ai.drawer.unknownTool")}
                                                        {item.traceType === "thinking"
                                                            ? (item.title || translate("ai.drawer.thinkingProcess"))
                                                            : (item.toolName || item.title || translate("ai.drawer.unknownTool"))}
                                                    </Typography>
                                                    <Chip
                                                        size="small"
                                                        color={item.status === "FAILED" ? "error" : item.status === "COMPLETED" ? "success" : "info"}
                                                        label={translate(item.status === "FAILED" ? "ai.drawer.toolStatusFailed" : item.status === "COMPLETED" ? "ai.drawer.toolStatusCompleted" : "ai.drawer.toolStatusRunning")}
                                                        color={item.status === "FAILED"
                                                            ? "error"
                                                            : item.status === "COMPLETED"
                                                                ? "success"
                                                                : item.status === "ABORTED"
                                                                    ? "warning"
                                                                    : "info"}
                                                        label={item.traceType === "thinking"
                                                            ? getThinkingStatusLabel(item.status)
                                                            : getToolStatusLabel(item.status)}
                                                    />
                                                    {item.durationMs != null && (
                                                        <Typography variant="caption" color="text.secondary">
                                                            {item.durationMs} ms
                                                        </Typography>
                                                    )}
                                                    {(item.inputSummary || item.outputSummary || item.errorMessage) && (
                                                    {item.traceType === "tool" && (item.inputSummary || item.outputSummary || item.errorMessage) && (
                                                        <Button
                                                            size="small"
                                                            onClick={() => toggleToolEventExpanded(item.toolCallId)}
                                                            endIcon={expandedToolIds.includes(item.toolCallId)
                                                            onClick={() => toggleTraceEventExpanded(item.traceId)}
                                                            endIcon={expandedTraceIds.includes(item.traceId)
                                                                ? <ExpandLessOutlinedIcon fontSize="small" />
                                                                : <ExpandMoreOutlinedIcon fontSize="small" />}
                                                            sx={{ ml: "auto", minWidth: "auto", px: 0.5 }}
                                                        >
                                                            {expandedToolIds.includes(item.toolCallId) ? translate("ai.drawer.collapseDetail") : translate("ai.drawer.viewDetail")}
                                                            {expandedTraceIds.includes(item.traceId) ? translate("ai.drawer.collapseDetail") : translate("ai.drawer.viewDetail")}
                                                        </Button>
                                                    )}
                                                </Stack>
                                                <Collapse in={expandedToolIds.includes(item.toolCallId)} timeout="auto" unmountOnExit>
                                                    {!!item.inputSummary && (
                                                        <Typography variant="caption" display="block" sx={{ mt: 0.75, whiteSpace: "pre-wrap" }}>
                                                            {translate("ai.drawer.toolInput", { value: item.inputSummary })}
                                                        </Typography>
                                                    )}
                                                    {!!item.outputSummary && (
                                                        <Typography variant="caption" display="block" sx={{ mt: 0.75, whiteSpace: "pre-wrap" }}>
                                                            {translate("ai.drawer.toolOutput", { value: item.outputSummary })}
                                                        </Typography>
                                                    )}
                                                    {!!item.errorMessage && (
                                                        <Typography variant="caption" color="error.main" display="block" sx={{ mt: 0.75, whiteSpace: "pre-wrap" }}>
                                                            {translate("ai.drawer.toolError", { value: item.errorMessage })}
                                                        </Typography>
                                                    )}
                                                </Collapse>
                                                {item.traceType === "thinking" ? (
                                                    <Typography variant="caption" display="block" color="text.secondary" sx={{ mt: 0.75, whiteSpace: "pre-wrap" }}>
                                                        {item.content || translate("ai.drawer.thinkingEmpty")}
                                                    </Typography>
                                                ) : (
                                                    <Collapse in={expandedTraceIds.includes(item.traceId)} timeout="auto" unmountOnExit>
                                                        {!!item.title && (
                                                            <Typography variant="caption" display="block" color="text.secondary" sx={{ mt: 0.75, whiteSpace: "pre-wrap" }}>
                                                                {item.title}
                                                            </Typography>
                                                        )}
                                                        {!!item.inputSummary && (
                                                            <Typography variant="caption" display="block" sx={{ mt: 0.75, whiteSpace: "pre-wrap" }}>
                                                                {translate("ai.drawer.toolInput", { value: item.inputSummary })}
                                                            </Typography>
                                                        )}
                                                        {!!item.outputSummary && (
                                                            <Typography variant="caption" display="block" sx={{ mt: 0.75, whiteSpace: "pre-wrap" }}>
                                                                {translate("ai.drawer.toolOutput", { value: item.outputSummary })}
                                                            </Typography>
                                                        )}
                                                        {!!item.errorMessage && (
                                                            <Typography variant="caption" color="error.main" display="block" sx={{ mt: 0.75, whiteSpace: "pre-wrap" }}>
                                                                {translate("ai.drawer.toolError", { value: item.errorMessage })}
                                                            </Typography>
                                                        )}
                                                    </Collapse>
                                                )}
                                            </Paper>
                                        ))}
                                    </Stack>
@@ -652,63 +934,80 @@

                    <Box flex={1} display="flex" flexDirection="column" minHeight={0}>
                        <Box px={2} py={1.5}>
                            <Stack direction="row" spacing={1} flexWrap="wrap" useFlexGap>
                                <Chip size="small" label={translate("ai.drawer.requestMetric", { value: runtimeSummary.requestId })} />
                                <Chip size="small" label={translate("ai.drawer.sessionMetric", { id: sessionId || "--" })} />
                                <Chip size="small" label={translate("ai.drawer.promptMetric", { value: runtimeSummary.promptName })} />
                                <Chip size="small" label={translate("ai.drawer.modelMetric", { value: runtimeSummary.model })} />
                                <Chip size="small" label={translate("ai.drawer.mcpMetric", { value: runtimeSummary.mountedMcpCount })} />
                                <Chip size="small" label={translate("ai.drawer.historyMetric", { value: persistedMessages.length })} />
                                <Chip size="small" label={translate("ai.drawer.recentMetric", { value: runtimeSummary.recentMessageCount })} />
                                <Chip size="small" color={runtimeSummary.hasSummary ? "success" : "default"} label={translate(runtimeSummary.hasSummary ? "ai.drawer.hasSummary" : "ai.drawer.noSummary")} />
                                <Chip size="small" color={runtimeSummary.hasFacts ? "info" : "default"} label={translate(runtimeSummary.hasFacts ? "ai.drawer.hasFacts" : "ai.drawer.noFacts")} />
                            <Stack direction="row" alignItems="center" justifyContent="space-between" spacing={1}>
                                <Typography variant="subtitle2">
                                    {translate("ai.drawer.runtimeOverview")}
                                </Typography>
                                <Button
                                    size="small"
                                    onClick={() => setRuntimePanelExpanded((prev) => !prev)}
                                    endIcon={runtimePanelExpanded
                                        ? <ExpandLessOutlinedIcon fontSize="small" />
                                        : <ExpandMoreOutlinedIcon fontSize="small" />}
                                    sx={{ minWidth: "auto", px: 1 }}
                                >
                                    {translate(runtimePanelExpanded ? "ai.drawer.runtimeCollapse" : "ai.drawer.runtimeExpand")}
                                </Button>
                            </Stack>
                            <Stack direction="row" spacing={1} mt={1.5} flexWrap="wrap" useFlexGap>
                                {quickLinks.map((item) => (
                            <Collapse in={runtimePanelExpanded} timeout="auto" unmountOnExit>
                                <Stack direction="row" spacing={1} flexWrap="wrap" useFlexGap sx={{ mt: 1.5 }}>
                                    <Chip size="small" label={translate("ai.drawer.requestMetric", { value: runtimeSummary.requestId })} />
                                    <Chip size="small" label={translate("ai.drawer.sessionMetric", { id: sessionId || "--" })} />
                                    <Chip size="small" label={translate("ai.drawer.promptMetric", { value: runtimeSummary.promptName })} />
                                    <Chip size="small" label={translate("ai.drawer.modelMetric", { value: runtimeSummary.model })} />
                                    <Chip size="small" label={translate("ai.drawer.mcpMetric", { value: runtimeSummary.mountedMcpCount })} />
                                    <Chip size="small" label={translate("ai.drawer.historyMetric", { value: persistedMessages.length })} />
                                    <Chip size="small" label={translate("ai.drawer.recentMetric", { value: runtimeSummary.recentMessageCount })} />
                                    <Chip size="small" color={runtimeSummary.hasSummary ? "success" : "default"} label={translate(runtimeSummary.hasSummary ? "ai.drawer.hasSummary" : "ai.drawer.noSummary")} />
                                    <Chip size="small" color={runtimeSummary.hasFacts ? "info" : "default"} label={translate(runtimeSummary.hasFacts ? "ai.drawer.hasFacts" : "ai.drawer.noFacts")} />
                                </Stack>
                                <Stack direction="row" spacing={1} mt={1.5} flexWrap="wrap" useFlexGap>
                                    {quickLinks.map((item) => (
                                        <Button
                                            key={item.path}
                                            size="small"
                                            variant="outlined"
                                            startIcon={item.icon}
                                            onClick={() => navigate(item.path)}
                                        >
                                            {item.label}
                                        </Button>
                                    ))}
                                    <Button
                                        key={item.path}
                                        size="small"
                                        variant="outlined"
                                        startIcon={item.icon}
                                        onClick={() => navigate(item.path)}
                                        startIcon={<HistoryOutlinedIcon />}
                                        onClick={handleRetainLatestRound}
                                        disabled={!sessionId || streaming}
                                    >
                                        {item.label}
                                        {translate("ai.drawer.retainLatestRound")}
                                    </Button>
                                ))}
                                <Button
                                    size="small"
                                    variant="outlined"
                                    startIcon={<HistoryOutlinedIcon />}
                                    onClick={handleRetainLatestRound}
                                    disabled={!sessionId || streaming}
                                >
                                    {translate("ai.drawer.retainLatestRound")}
                                </Button>
                                <Button
                                    size="small"
                                    variant="outlined"
                                    color="warning"
                                    startIcon={<AutoDeleteOutlinedIcon />}
                                    onClick={handleClearMemory}
                                    disabled={!sessionId || streaming}
                                >
                                    {translate("ai.drawer.clearMemory")}
                                </Button>
                            </Stack>
                            {!!runtime?.memorySummary && (
                                <Alert severity="info" sx={{ mt: 1.5 }}>
                                    <Typography variant="body2" sx={{ whiteSpace: "pre-wrap" }}>
                                        {runtime.memorySummary}
                                    </Typography>
                                </Alert>
                            )}
                            {!!runtime?.memoryFacts && (
                                <Alert severity="success" sx={{ mt: 1.5 }}>
                                    <Typography variant="body2" sx={{ whiteSpace: "pre-wrap" }}>
                                        {runtime.memoryFacts}
                                    </Typography>
                                </Alert>
                            )}
                                    <Button
                                        size="small"
                                        variant="outlined"
                                        color="warning"
                                        startIcon={<AutoDeleteOutlinedIcon />}
                                        onClick={handleClearMemory}
                                        disabled={!sessionId || streaming}
                                    >
                                        {translate("ai.drawer.clearMemory")}
                                    </Button>
                                </Stack>
                                {!!runtime?.memorySummary && (
                                    <Alert severity="info" sx={{ mt: 1.5 }}>
                                        <Typography variant="body2" sx={{ whiteSpace: "pre-wrap" }}>
                                            {runtime.memorySummary}
                                        </Typography>
                                    </Alert>
                                )}
                                {!!runtime?.memoryFacts && (
                                    <Alert severity="success" sx={{ mt: 1.5 }}>
                                        <Typography variant="body2" sx={{ whiteSpace: "pre-wrap" }}>
                                            {runtime.memoryFacts}
                                        </Typography>
                                    </Alert>
                                )}
                            </Collapse>
                            {loadingRuntime && (
                                <Typography variant="body2" color="text.secondary" mt={1}>
                                    {translate("ai.drawer.loadingRuntime")}
@@ -746,26 +1045,37 @@
                                    display="flex"
                                    justifyContent={message.role === "user" ? "flex-end" : "flex-start"}
                                >
                                    <Paper
                                        elevation={0}
                                        sx={{
                                            px: 1.5,
                                            py: 1.25,
                                            maxWidth: "85%",
                                            borderRadius: 2,
                                            bgcolor: message.role === "user" ? "primary.main" : "grey.100",
                                            color: message.role === "user" ? "primary.contrastText" : "text.primary",
                                            whiteSpace: "pre-wrap",
                                            wordBreak: "break-word",
                                        }}
                                    >
                                        <Typography variant="caption" display="block" sx={{ opacity: 0.72, mb: 0.5 }}>
                                            {message.role === "user" ? translate("ai.drawer.userRole") : translate("ai.drawer.assistantRole")}
                                        </Typography>
                                        <Typography variant="body2">
                                            {message.content || (streaming && index === messages.length - 1 ? translate("ai.drawer.thinking") : "")}
                                        </Typography>
                                    </Paper>
                                    <Stack spacing={1} sx={{ maxWidth: "85%", width: "100%" }} alignItems={message.role === "user" ? "flex-end" : "flex-start"}>
                                        <Paper
                                            elevation={0}
                                            sx={{
                                                px: 1.5,
                                                py: 1.25,
                                                width: "fit-content",
                                                maxWidth: "100%",
                                                borderRadius: 2,
                                                bgcolor: message.role === "user" ? "primary.main" : "grey.100",
                                                color: message.role === "user" ? "primary.contrastText" : "text.primary",
                                                whiteSpace: "pre-wrap",
                                                wordBreak: "break-word",
                                            }}
                                        >
                                            <Typography variant="caption" display="block" sx={{ opacity: 0.72, mb: 0.5 }}>
                                                {message.role === "user" ? translate("ai.drawer.userRole") : translate("ai.drawer.assistantRole")}
                                            </Typography>
                                            {message.role === "assistant" ? (
                                                <AiMarkdownContent
                                                    content={message.content || (streaming && index === messages.length - 1
                                                        ? translate("ai.drawer.thinking")
                                                        : "")}
                                                />
                                            ) : (
                                                <Typography variant="body2" sx={{ whiteSpace: "pre-wrap", wordBreak: "break-word" }}>
                                                    {message.content || ""}
                                                </Typography>
                                            )}
                                        </Paper>
                                    </Stack>
                                </Box>
                            ))}
                            <Box ref={messagesBottomRef} sx={{ height: 1 }} />
@@ -799,7 +1109,47 @@
                                maxRows={6}
                                placeholder={translate("ai.drawer.inputPlaceholder")}
                            />
                            <Stack direction="row" spacing={1} justifyContent="flex-end" mt={1.25}>
                            <Stack
                                direction={{ xs: "column", sm: "row" }}
                                spacing={1}
                                justifyContent="space-between"
                                alignItems={{ xs: "stretch", sm: "center" }}
                                mt={1.25}
                            >
                                {!!selectableModelOptions.length && (
                                    <TextField
                                        select
                                        size="small"
                                        label={translate("ai.drawer.modelSelectorLabel")}
                                        value={selectedAiParamId ?? runtime?.aiParamId ?? selectableModelOptions[0]?.aiParamId ?? ""}
                                        onChange={handleModelChange}
                                        disabled={streaming || loadingRuntime || selectableModelOptions.length <= 1}
                                        SelectProps={{
                                            MenuProps: {
                                                disableScrollLock: true,
                                                sx: {
                                                    zIndex: 1605,
                                                },
                                                PaperProps: {
                                                    sx: {
                                                        zIndex: 1606,
                                                    },
                                                },
                                            },
                                        }}
                                        sx={{
                                            minWidth: { xs: "100%", sm: 260 },
                                            maxWidth: { xs: "100%", sm: 320 },
                                        }}                                       
                                    >
                                        {selectableModelOptions.map((item) => (
                                            <MenuItem key={String(item.aiParamId)} value={item.aiParamId}>
                                                {`${item.name || item.model || "--"}${item.model && item.name !== item.model ? ` / ${item.model}` : ""}${item.active ? ` ${translate("ai.drawer.defaultModelSuffix")}` : ""}`}
                                            </MenuItem>
                                        ))}
                                    </TextField>
                                )}
                                <Stack direction="row" spacing={1} justifyContent="flex-end">
                                <Button onClick={() => setInput("")}>{translate("ai.drawer.clearInput")}</Button>
                                {streaming ? (
                                    <Button variant="outlined" color="warning" startIcon={<StopCircleOutlinedIcon />} onClick={() => stopStream(true)}>
@@ -810,12 +1160,21 @@
                                        {translate("ai.drawer.send")}
                                    </Button>
                                )}
                                </Stack>
                            </Stack>
                        </Box>
                    </Box>
                </Box>
            </Box>
            <Dialog open={renameDialog.open} onClose={closeRenameDialog} fullWidth maxWidth="xs">
            <Dialog
                open={renameDialog.open}
                onClose={closeRenameDialog}
                fullWidth
                maxWidth="xs"
                sx={{
                    zIndex: AI_CHAT_DIALOG_Z_INDEX,
                }}
            >
                <DialogTitle>{translate("ai.drawer.renameDialogTitle")}</DialogTitle>
                <DialogContent>
                    <TextField