-
- )
-}
-
-export type ModelSelectorEmptyProps = ComponentProps
- )
-}
-
-export type ModelSelectorLogoGroupProps = ComponentProps<"div">
-
-export const ModelSelectorLogoGroup = ({
- className,
- ...props
-}: ModelSelectorLogoGroupProps) => (
- img]:rounded-full [&>img]:bg-background [&>img]:p-px [&>img]:ring-1 dark:[&>img]:bg-foreground",
- className,
- )}
- {...props}
- />
-)
-
-export type ModelSelectorNameProps = ComponentProps<"span">
-
-export const ModelSelectorName = ({
- className,
- ...props
-}: ModelSelectorNameProps) => (
-
-)
-
-export type ModelSelectorSectionHeaderProps = {
- icon: ReactNode
- label: string
- className?: string
-}
-
-export const ModelSelectorSectionHeader = ({
- icon,
- label,
- className,
-}: ModelSelectorSectionHeaderProps) => (
- (null)
-
-export const useReasoning = () => {
- const context = useContext(ReasoningContext)
- if (!context) {
- throw new Error("Reasoning components must be used within Reasoning")
- }
- return context
-}
-
-export type ReasoningProps = ComponentProps & {
+export type ReasoningProps = {
+ className?: string
isStreaming?: boolean
- open?: boolean
+ /** Open while streaming, then folds once about a second after it ends */
defaultOpen?: boolean
- onOpenChange?: (open: boolean) => void
- duration?: number
+ getThinkingMessage: (isStreaming: boolean, duration?: number) => ReactNode
+ children: string
}
const AUTO_CLOSE_DELAY = 1000
const MS_IN_S = 1000
-export const Reasoning = memo(
- ({
- className,
- isStreaming = false,
- open,
- defaultOpen = true,
- onOpenChange,
- duration: durationProp,
- children,
- ...props
- }: ReasoningProps) => {
- const [isOpen, setIsOpen] = useControllableState({
- prop: open,
- defaultProp: defaultOpen,
- onChange: onOpenChange,
- })
- const [duration, setDuration] = useControllableState({
- prop: durationProp,
- defaultProp: undefined,
- })
+export function Reasoning({
+ className,
+ isStreaming = false,
+ defaultOpen = true,
+ getThinkingMessage,
+ children,
+}: ReasoningProps) {
+ const [isOpen, setIsOpen] = useState(defaultOpen)
+ const [duration, setDuration] = useState()
+ const [hasAutoClosed, setHasAutoClosed] = useState(false)
+ const [startTime, setStartTime] = useState(null)
- const [hasAutoClosed, setHasAutoClosed] = useState(false)
- const [startTime, setStartTime] = useState(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)
+ // Track duration when streaming starts and ends
+ useEffect(() => {
+ if (isStreaming) {
+ if (startTime === null) {
+ setStartTime(Date.now())
}
- }, [isStreaming, startTime, setDuration])
-
- // Auto-open when streaming starts, auto-close when streaming ends (once only)
- useEffect(() => {
- if (defaultOpen && !isStreaming && isOpen && !hasAutoClosed) {
- // Add a small delay before closing to allow user to see the content
- const timer = setTimeout(() => {
- setIsOpen(false)
- setHasAutoClosed(true)
- }, AUTO_CLOSE_DELAY)
-
- return () => clearTimeout(timer)
- }
- }, [isStreaming, isOpen, defaultOpen, setIsOpen, hasAutoClosed])
-
- const handleOpenChange = (newOpen: boolean) => {
- setIsOpen(newOpen)
+ } else if (startTime !== null) {
+ setDuration(Math.ceil((Date.now() - startTime) / MS_IN_S))
+ setStartTime(null)
}
+ }, [isStreaming, startTime])
- return (
-
-
- {children}
-
-
- )
- },
-)
+ // 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)
-export type ReasoningTriggerProps = ComponentProps<
- typeof CollapsibleTrigger
-> & {
- getThinkingMessage?: (isStreaming: boolean, duration?: number) => ReactNode
-}
+ return () => clearTimeout(timer)
+ }
+ }, [isStreaming, isOpen, defaultOpen, hasAutoClosed])
-const defaultGetThinkingMessage = (isStreaming: boolean, duration?: number) => {
- if (isStreaming || duration === 0) {
- return Thinking...
- }
- if (duration === undefined) {
- return
- {children ?? (
- <>
-
- )
- },
-)
-
-export type ReasoningContentProps = ComponentProps<
- typeof CollapsibleContent
-> & {
- children: string
-}
-
-export const ReasoningContent = memo(
- ({ className, children, ...props }: ReasoningContentProps) => (
-
-
- ),
-)
-
-Reasoning.displayName = "Reasoning"
-ReasoningTrigger.displayName = "ReasoningTrigger"
-ReasoningContent.displayName = "ReasoningContent"
+
+
+
+
+
+ )
+}
diff --git a/components/ai-elements/shimmer.tsx b/components/ai-elements/shimmer.tsx
index 274bf85f..1ebed4f0 100644
--- a/components/ai-elements/shimmer.tsx
+++ b/components/ai-elements/shimmer.tsx
@@ -1,13 +1,6 @@
"use client"
-import { motion } from "motion/react"
-import {
- type CSSProperties,
- type ElementType,
- type JSX,
- memo,
- useMemo,
-} from "react"
+import { type CSSProperties, type ElementType, memo, useMemo } from "react"
import { cn } from "@/lib/utils"
export type TextShimmerProps = {
@@ -25,39 +18,29 @@ const ShimmerComponent = ({
duration = 2,
spread = 2,
}: TextShimmerProps) => {
- const MotionComponent = motion.create(
- Component as keyof JSX.IntrinsicElements,
- )
-
const dynamicSpread = useMemo(
() => (children?.length ?? 0) * spread,
[children, spread],
)
return (
-
{children}
-
+
)
}
diff --git a/components/button-with-tooltip.tsx b/components/button-with-tooltip.tsx
deleted file mode 100644
index 089b0596..00000000
--- a/components/button-with-tooltip.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import type { VariantProps } from "class-variance-authority"
-import type React from "react"
-import { Button, type buttonVariants } from "@/components/ui/button"
-import {
- Tooltip,
- TooltipContent,
- TooltipProvider,
- TooltipTrigger,
-} from "@/components/ui/tooltip"
-
-interface ButtonWithTooltipProps
- extends React.ComponentProps<"button">,
- VariantProps {
- tooltipContent: string
- children: React.ReactNode
- asChild?: boolean
-}
-
-export function ButtonWithTooltip({
- tooltipContent,
- children,
- ...buttonProps
-}: ButtonWithTooltipProps) {
- return (
-
-
-
-
-
-
- {tooltipContent}
-
-
-
- )
-}
diff --git a/components/chat/TemplateCreateDialog.tsx b/components/chat/TemplateCreateDialog.tsx
deleted file mode 100644
index c88a5be9..00000000
--- a/components/chat/TemplateCreateDialog.tsx
+++ /dev/null
@@ -1,206 +0,0 @@
-"use client"
-
-import { Bookmark, Plus } from "lucide-react"
-import { useEffect, useState } from "react"
-import { Button } from "@/components/ui/button"
-import {
- Dialog,
- DialogContent,
- DialogDescription,
- DialogFooter,
- DialogHeader,
- DialogTitle,
-} from "@/components/ui/dialog"
-import { Input } from "@/components/ui/input"
-import { Label } from "@/components/ui/label"
-import { Switch } from "@/components/ui/switch"
-import { Textarea } from "@/components/ui/textarea"
-import { useDictionary } from "@/hooks/use-dictionary"
-import {
- createTemplate,
- type TemplateCreateInput,
-} from "@/lib/template-storage"
-
-interface TemplateCreateDialogProps {
- open: boolean
- onOpenChange: (open: boolean) => void
- onSuccess: () => void
- initialPrompt?: string
-}
-
-export function TemplateCreateDialog({
- open,
- onOpenChange,
- onSuccess,
- initialPrompt = "",
-}: TemplateCreateDialogProps) {
- const dict = useDictionary()
- const [title, setTitle] = useState("")
- const [description, setDescription] = useState("")
- const [prompt, setPrompt] = useState("")
- const [pinned, setPinned] = useState(false)
- const [isSubmitting, setIsSubmitting] = useState(false)
- const [error, setError] = useState(null)
-
- // Reset form when dialog opens with the latest initialPrompt
- useEffect(() => {
- if (open) {
- setTitle("")
- setDescription("")
- setPrompt(initialPrompt)
- setPinned(false)
- setError(null)
- }
- }, [open, initialPrompt])
-
- const handleSubmit = async (e: React.FormEvent) => {
- e.preventDefault()
- // React submit events bubble through the portal; keep them away from
- // the chat form this dialog may be rendered in
- e.stopPropagation()
-
- const trimmedPrompt = prompt.trim()
- if (!trimmedPrompt) {
- setError(dict.templates.promptRequired)
- return
- }
-
- setIsSubmitting(true)
- setError(null)
-
- try {
- const input: TemplateCreateInput = {
- prompt: trimmedPrompt,
- title: title.trim() || undefined,
- description: description.trim() || undefined,
- pinned,
- }
-
- const template = await createTemplate(input)
- if (template) {
- onSuccess()
- onOpenChange(false)
- } else {
- setError(dict.templates.createFailed)
- }
- } catch (err) {
- console.error("Failed to create template:", err)
- setError(dict.templates.createFailed)
- } finally {
- setIsSubmitting(false)
- }
- }
-
- return (
-
-
- {label}
-
-)
diff --git a/components/ai-elements/reasoning.tsx b/components/ai-elements/reasoning.tsx
index 271db5cf..b3dbc985 100644
--- a/components/ai-elements/reasoning.tsx
+++ b/components/ai-elements/reasoning.tsx
@@ -1,186 +1,83 @@
"use client"
-import { useControllableState } from "@radix-ui/react-use-controllable-state"
import { BrainIcon, ChevronDownIcon } from "lucide-react"
-import type { ComponentProps, ReactNode } from "react"
-import { createContext, memo, useContext, useEffect, useState } from "react"
+import type { ReactNode } from "react"
+import { useEffect, useState } from "react"
import {
Collapsible,
CollapsibleContent,
CollapsibleTrigger,
} from "@/components/ui/collapsible"
import { cn } from "@/lib/utils"
-import { Shimmer } from "./shimmer"
-type ReasoningContextValue = {
- isStreaming: boolean
- isOpen: boolean
- setIsOpen: (open: boolean) => void
- duration: number | undefined
-}
-
-const ReasoningContext = createContextThought for a few seconds
- } - returnThought for {duration} seconds
-} - -export const ReasoningTrigger = memo( - ({ - className, - children, - getThinkingMessage = defaultGetThinkingMessage, - ...props - }: ReasoningTriggerProps) => { - const { isStreaming, isOpen, duration } = useReasoning() - - return ( -{children}
- {children}
+