mirror of
https://github.com/DayuanJiang/next-ai-draw-io.git
synced 2026-10-13 04:59:51 +08:00
dayuan.jiang
fb87291cde
- components/model-selector.tsx uses Dialog, Command and Tooltip directly; delete components/ai-elements/model-selector.tsx and components/button-with-tooltip.tsx; one renderGroups for both lists; no "Server · " prefix round trip - components/ui: drop CommandDialog, CommandShortcut and six unused shadcn exports - model-config-dialog: no type-to-confirm on provider delete; provider-credentials-fields: drop footer and bedrockApiKey - hooks/use-model-config.ts and lib/types/model-config.ts: remove the 2025-12 single-provider migration, resetConfig, selectedModel and fields nothing reads - components/chat/TemplateFormDialog.tsx replaces the create and edit dialogs; TemplatePanel drops the setInput fallback, the templatesChanged listener, dictionary fallbacks and formatLastUsed; lib/template-storage.ts drops getTemplate, clickCount and indexes - reasoning.tsx becomes one component; shimmer uses a CSS keyframe (motion and @radix-ui/react-use-controllable-state removed) - error-toast.tsx deleted in favour of toast.error; ValidationCard drops the idle status; dev-xml-simulator uses English literals - admin: no enum setting type, shared types from lib/admin (AdminProviderInput stays exported for that), ENABLE_HISTORY_XML_REPLACE entry removed - app/globals.css: drop check-pop, --ease-spring, --duration-normal and the shadow aliases - dictionaries: 81 unused keys removed from all four languages
84 lines
2.9 KiB
TypeScript
84 lines
2.9 KiB
TypeScript
"use client"
|
|
|
|
import { BrainIcon, ChevronDownIcon } from "lucide-react"
|
|
import type { ReactNode } from "react"
|
|
import { useEffect, useState } from "react"
|
|
import {
|
|
Collapsible,
|
|
CollapsibleContent,
|
|
CollapsibleTrigger,
|
|
} from "@/components/ui/collapsible"
|
|
import { cn } from "@/lib/utils"
|
|
|
|
export type ReasoningProps = {
|
|
className?: string
|
|
isStreaming?: boolean
|
|
/** Open while streaming, then folds once about a second after it ends */
|
|
defaultOpen?: boolean
|
|
getThinkingMessage: (isStreaming: boolean, duration?: number) => ReactNode
|
|
children: string
|
|
}
|
|
|
|
const AUTO_CLOSE_DELAY = 1000
|
|
const MS_IN_S = 1000
|
|
|
|
export function Reasoning({
|
|
className,
|
|
isStreaming = false,
|
|
defaultOpen = true,
|
|
getThinkingMessage,
|
|
children,
|
|
}: ReasoningProps) {
|
|
const [isOpen, setIsOpen] = useState(defaultOpen)
|
|
const [duration, setDuration] = useState<number>()
|
|
const [hasAutoClosed, setHasAutoClosed] = useState(false)
|
|
const [startTime, setStartTime] = useState<number | null>(null)
|
|
|
|
// Track duration when streaming starts and ends
|
|
useEffect(() => {
|
|
if (isStreaming) {
|
|
if (startTime === null) {
|
|
setStartTime(Date.now())
|
|
}
|
|
} else if (startTime !== null) {
|
|
setDuration(Math.ceil((Date.now() - startTime) / MS_IN_S))
|
|
setStartTime(null)
|
|
}
|
|
}, [isStreaming, startTime])
|
|
|
|
// Auto-close once when streaming ends, after a short delay so the user
|
|
// sees the content
|
|
useEffect(() => {
|
|
if (defaultOpen && !isStreaming && isOpen && !hasAutoClosed) {
|
|
const timer = setTimeout(() => {
|
|
setIsOpen(false)
|
|
setHasAutoClosed(true)
|
|
}, AUTO_CLOSE_DELAY)
|
|
|
|
return () => clearTimeout(timer)
|
|
}
|
|
}, [isStreaming, isOpen, defaultOpen, hasAutoClosed])
|
|
|
|
return (
|
|
<Collapsible
|
|
className={cn("not-prose mb-4", className)}
|
|
onOpenChange={setIsOpen}
|
|
open={isOpen}
|
|
>
|
|
<CollapsibleTrigger className="flex w-full items-center gap-2 text-muted-foreground text-sm transition-colors hover:text-foreground">
|
|
<BrainIcon className="size-4" />
|
|
{getThinkingMessage(isStreaming, duration)}
|
|
<ChevronDownIcon
|
|
className={cn(
|
|
"size-4 transition-transform",
|
|
isOpen ? "rotate-180" : "rotate-0",
|
|
)}
|
|
/>
|
|
</CollapsibleTrigger>
|
|
<CollapsibleContent className="mt-4 text-sm data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 text-muted-foreground outline-none data-[state=closed]:animate-out data-[state=open]:animate-in">
|
|
<div className="whitespace-pre-wrap">{children}</div>
|
|
</CollapsibleContent>
|
|
</Collapsible>
|
|
)
|
|
}
|