setEditText(e.target.value)}
                    rows={Math.min(editText.split("\n").length + 1, 6)}
                    onKeyDown={(e) => {
                        if (e.key === "Escape") setEditing(false)
                        else if (
                            e.key === "Enter" &&
                            (e.metaKey || e.ctrlKey)
                        ) {
                            e.preventDefault()
                            submitEdit()
                        }
                    }}
                    className="w-full resize-none rounded-xl border border-foreground/20 bg-card px-3 py-2.5 text-sm outline-none focus:shadow-[0_0_0_4px_var(--accent)]"
                />
                <div className="flex justify-end gap-2">
                    <button
                        type="button"
                        onClick={() => setEditing(false)}
                        className="h-7 rounded-lg px-3 text-xs text-muted-foreground hover:bg-accent hover:text-foreground"
                    >
                        {dict.common.cancel}
                    </button>
                    <button
                        type="button"
                        onClick={submitEdit}
                        disabled={!editText.trim()}
                        className="h-7 rounded-lg bg-primary px-3 text-xs font-medium text-primary-foreground disabled:opacity-40"
                    >
                        {dict.chat.saveAndSubmit}
                    </button>
                </div>
            </div>
        )
    }

const images = (message.parts ?? []).filter((p) => p.type === "file") as {
        url: string
    }[]

return (
        <div className="group/message flex items-start justify-end gap-1">
            <div className="mt-1 flex shrink-0 items-center transition-opacity [@media(hover:hover)]:opacity-0 group-hover/message:opacity-100 focus-within:opacity-100">
                {canEdit && (
                    <ActionButton
                        label={dict.chat.editMessage}
                        onClick={startEdit}
                    >
                        <Pencil />
                    </ActionButton>
                )}
                <ActionButton
                    label={copied ? dict.chat.copied : dict.chat.copyResponse}
                    onClick={async () => {
                        const ok = await copyText(text)
                        if (!ok) toast.error(dict.chat.failedToCopyDetail)
                        setCopied(ok)
                        setTimeout(() => setCopied(false), 1500)
                    }}
                >
                    {copied ? <Check /> : <Copy />}
                </ActionButton>
                <ActionButton
                    label={dict.templates.saveAsTemplate}
                    onClick={() => setSaveTemplate(true)}
                >
                    <BookmarkPlus />
                </ActionButton>
            </div>
            <div
                className={cn(
                    "min-w-0 max-w-[85%] rounded-2xl rounded-br-md bg-secondary px-3.5 py-2.5",
                    canEdit &&
                        "cursor-pointer transition-colors hover:bg-interactive-active",
                )}
                role={canEdit ? "button" : undefined}
                tabIndex={canEdit ? 0 : undefined}
                onClick={startEdit}
                onKeyDown={(e) => {
                    if (canEdit && (e.key === "Enter" || e.key === " ")) {
                        e.preventDefault()
                        startEdit()
                    }
                }}
                title={canEdit ? dict.chat.clickToEdit : undefined}
            >
                {images.length > 0 && (
                    <div className="mb-2 flex flex-wrap gap-1.5">
                        {images.map((image, i) => (
                            <Image
                                key={i}
                                src={image.url}
                                width={96}
                                height={72}
                                alt={dict.chat.attachedImage}
                                className="h-[72px] w-24 rounded-lg border border-border bg-white object-cover"
                            />
                        ))}
                    </div>
                )}
                {text && <MessageText text={text} isUser />}
            </div>
            {saveTemplate && (
                <TemplateCreateDialog
                    open
                    onOpenChange={(open) => !open && setSaveTemplate(false)}
                    onSuccess={() => {
                        setSaveTemplate(false)
                        bumpTemplates()
                    }}
                    initialPrompt={getUserOriginalText(message)}
                />
            )}
        </div>
    )
}

function AssistantMessage({
    message,
    index,
    isLastMessage,
    isLastAssistant,
}: {
    message: UIMessage
    index: number
    isLastMessage: boolean
    isLastAssistant: boolean
}) {
    const dict = useDictionary()
    // The thinking header in the page language
    const thinkingMessage = (isStreaming: boolean, duration?: number) => {
        if (isStreaming || duration === 0) {
            return <Shimmer duration={1}>{dict.reasoning.thinking}</Shimmer>
        }
        if (duration === undefined) return <p>{dict.reasoning.thoughtBrief}</p>
        return (
            <p>
                {duration === 1
                    ? dict.reasoning.thoughtForOne
                    : dict.reasoning.thoughtFor.replace(
                          "{duration}",
                          String(duration),
                      )}
            </p>
        )
    }
    const engine = useChatEngine()
    const [copied, setCopied] = useState(false)
    const [feedback, setFeedback] = useState<"good" | "bad" | null>(null)
    const isRestored = engine.loadedMessageIdsRef.current.has(message.id)
    const parts = message.parts ?? []
    const isCachedExample = parts.some((p: any) =>
        p.toolCallId?.startsWith("cached-"),
    )
    const text = getMessageTextContent(message)

const submitFeedback = async (value: "good" | "bad") => {
        if (feedback === value) {
            setFeedback(null)
            return
        }
        setFeedback(value)
        try {
            await fetch(getApiEndpoint("/api/log-feedback"), {
                method: "POST",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify({
                    messageId: message.id,
                    feedback: value,
                    sessionId: engine.langfuseSessionId,
                }),
            })
        } catch (error) {
            console.error("Failed to log feedback:", error)
            toast.error(dict.errors.failedToRecordFeedback)
            setFeedback(null)
        }
    }

// Consecutive text parts render together; tools render in place
    const blocks: { kind: "text" | "tool" | "reasoning"; index: number }[] = []
    parts.forEach((part, partIndex) => {
        if (part.type === "reasoning")
            blocks.push({ kind: "reasoning", index: partIndex })
        else if (part.type?.startsWith("tool-"))
            blocks.push({ kind: "tool", index: partIndex })
        else if (part.type === "text") {
            const last = blocks[blocks.length - 1]
            if (last?.kind !== "text")
                blocks.push({ kind: "text", index: partIndex })
        }
    })

const textRun = (start: number) => {
        const out: string[] = []
        for (let i = start; i < parts.length && parts[i].type === "text"; i++) {
            out.push((parts[i] as { text: string }).text)
        }
        return out.join("\n")
    }

return (
        <div className="group/message space-y-2.5">
            {blocks.map((block) => {
                const part = parts[block.index]
                if (block.kind === "reasoning") {
                    const isStreamingReasoning =
                        engine.status === "streaming" &&
                        isLastMessage &&
                        block.index === parts.length - 1
                    return (
                        <Reasoning
                            key={`r-${block.index}`}
                            className="w-full"
                            isStreaming={isStreamingReasoning}
                            defaultOpen={!isRestored}
                        >
                            <ReasoningTrigger
                                getThinkingMessage={thinkingMessage}
                            />
                            <ReasoningContent>
                                {(part as { text: string }).text}
                            </ReasoningContent>
                        </Reasoning>
                    )
                }
                if (block.kind === "tool") {
                    const toolPart = part as unknown as ToolPartLike
                    const validationState =
                        engine.validationStates[toolPart.toolCallId]
                    return (
                        <div key={`t-${block.index}`} className="space-y-2">
                            <ToolActivity
                                part={toolPart}
                                isLastMessage={isLastMessage}
                            />
                            {toolPart.type === "tool-display_diagram" &&
                                validationState && (
                                    <ValidationCard
                                        state={validationState}
                                        onImproveWithSuggestions={
                                            engine.improveWithSuggestions
                                        }
                                    />
                                )}
                        </div>
                    )
                }
                const run = textRun(block.index)
                if (!run.trim()) return null
                return (
                    <MessageText
                        key={`x-${block.index}`}
                        text={run}
                        isUser={false}
                    />
                )
            })}

{!(engine.isBusy && isLastMessage) && (
                <div className="-ml-1.5 flex items-center transition-opacity [@media(hover:hover)]:opacity-0 group-hover/message:opacity-100 focus-within:opacity-100">
                    {text && (
                        <ActionButton
                            label={
                                copied
                                    ? dict.chat.copied
                                    : dict.chat.copyResponse
                            }
                            onClick={async () => {
                                const ok = await copyText(text)
                                if (!ok)
                                    toast.error(dict.chat.failedToCopyDetail)
                                setCopied(ok)
                                setTimeout(() => setCopied(false), 1500)
                            }}
                        >
                            {copied ? <Check /> : <Copy />}
                        </ActionButton>
                    )}
                    {isLastAssistant && !isCachedExample && (
                        <ActionButton
                            label={dict.chat.regenerate}
                            onClick={() => engine.regenerate(index)}
                        >
                            <RotateCcw />
                        </ActionButton>
                    )}
                    <ActionButton
                        label={dict.chat.goodResponse}
                        active={feedback === "good"}
                        onClick={() => submitFeedback("good")}
                    >
                        <ThumbsUp
                            className={cn(
                                feedback === "good" && "fill-current",
                            )}
                        />
                    </ActionButton>
                    <ActionButton
                        label={dict.chat.badResponse}
                        active={feedback === "bad"}
                        onClick={() => submitFeedback("bad")}
                    >
                        <ThumbsDown
                            className={cn(feedback === "bad" && "fill-current")}
                        />
                    </ActionButton>
                </div>
            )}
        </div>
    )
}

/**
 * A failed request: what to do in the text color, the provider's own words
 * below it, and the action that can fix it first
 */
function ErrorNotice({
    text,
    openModelConfig,
    onOpenModelConfig,
    onRetry,
}: {
    text: string
    openModelConfig: boolean
    onOpenModelConfig: () => void
    onRetry?: () => void
}) {
    const dict = useDictionary()
    // Provider errors are "hint\n\nprovider message"
    const split = text.indexOf("\n\n")
    const headline = split >= 0 ? text.slice(0, split) : text
    const detail = split >= 0 ? text.slice(split + 2).trim() : ""
    const button =
        "inline-flex h-7 items-center gap-1 rounded-lg px-2.5 text-xs font-medium"
    return (
        <div
            role="alert"
            className="rounded-xl border border-destructive/25 bg-destructive/5 px-3.5 py-3 text-[13px]"
        >
            <div className="flex items-start gap-2.5">
                <AlertCircle className="mt-0.5 size-4 shrink-0 text-destructive" />
                <div className="min-w-0 flex-1">
                    <p className="whitespace-pre-line break-words font-medium text-foreground">
                        {headline}
                    </p>
                    {detail && (
                        <p className="mt-1 whitespace-pre-line break-words text-xs text-muted-foreground">
                            {detail}
                        </p>
                    )}
                    {(openModelConfig || onRetry) && (
                        <div className="mt-2.5 flex flex-wrap gap-2">
                            {openModelConfig && (
                                <button
                                    type="button"
                                    onClick={onOpenModelConfig}
                                    className={cn(
                                        button,
                                        "bg-primary text-primary-foreground hover:opacity-90",
                                    )}
                                >
                                    {dict.errors.llm.openModelSettings}
                                </button>
                            )}
                            {onRetry && (
                                <button
                                    type="button"
                                    onClick={onRetry}
                                    className={cn(
                                        button,
                                        "border border-border bg-card text-foreground hover:bg-accent",
                                    )}
                                    data-testid="retry-button"
                                >
                                    <RotateCcw className="size-3.5" />
                                    {dict.chat.retry}
                                </button>
                            )}
                        </div>
                    )}
                </div>
            </div>
        </div>
    )
}

export function MessageList() {
    const dict = useDictionary()
    const openSettings = useUiStore((s) => s.openSettings)
    const engine = useChatEngine()
    const { messages } = engine
    const endRef = useRef<HTMLDivElement>(null)
    const prevCountRef = useRef(0)
    const throttleRef = useRef<ReturnType<typeof setTimeout> | null>(null)

// Keep the newest message in view; jump instantly on bulk loads
    useEffect(() => {
        if (!endRef.current || messages.length === 0) return
        const prev = prevCountRef.current
        prevCountRef.current = messages.length
        if (prev === 0 || messages.length - prev > 1) {
            endRef.current.scrollIntoView({ behavior: "instant", block: "end" })
            return
        }
        if (!throttleRef.current) {
            endRef.current.scrollIntoView({ behavior: "smooth", block: "end" })
            throttleRef.current = setTimeout(() => {
                throttleRef.current = null
                endRef.current?.scrollIntoView({
                    behavior: "smooth",
                    block: "end",
                })
            }, 150)
        }
    }, [messages])

const lastAssistantIndex = messages
        .map((m) => m.role)
        .lastIndexOf("assistant")
    const lastUserIndex = messages.map((m) => m.role).lastIndexOf("user")

return (
        <div className="space-y-4 px-4 pt-4 pb-2">
            {messages.map((message, index) => {
                const isRestored = engine.loadedMessageIdsRef.current.has(
                    message.id,
                )
                return (
                    <div
                        key={message.id}
                        className={cn(!isRestored && "animate-message-in")}
                    >
                        {message.role === "user" ? (
                            <UserMessage
                                message={message}
                                index={index}
                                isLast={index === lastUserIndex}
                            />
                        ) : message.role === "assistant" ? (
                            <AssistantMessage
                                message={message}
                                index={index}
                                isLastMessage={index === messages.length - 1}
                                isLastAssistant={index === lastAssistantIndex}
                            />
                        ) : (
                            <ErrorNotice
                                text={getMessageTextContent(message)}
                                openModelConfig={
                                    !!(
                                        message.metadata as
                                            | { openModelConfig?: boolean }
                                            | undefined
                                    )?.openModelConfig
                                }
                                onOpenModelConfig={() => openSettings("models")}
                                onRetry={
                                    index === messages.length - 1 &&
                                    !engine.isBusy &&
                                    lastUserIndex >= 0
                                        ? engine.retryLastMessage
                                        : undefined
                                }
                            />
                        )}
                    </div>
                )
            })}
            {engine.status === "submitted" &&
                messages[messages.length - 1]?.role === "user" && (
                    <div className="px-1 text-[13px]" aria-live="polite">
                        <Shimmer as="span">{dict.reasoning.thinking}</Shimmer>
                    </div>
                )}
            <div ref={endRef} />
        </div>
    )
}