@allbluecn/web-app 0.17.1 → 0.18.0

package/src/components/hextaui/ai-prompt-input.tsx

@@ -1,781 +0,0 @@
-
-import {
-  Check,
-  FileText,
-  Globe,
-  Lightbulb,
-  Mic,
-  MoreHorizontal,
-  Paperclip,
-  Plus,
-  Send,
-  X,
-} from "lucide-react"
-import { useCallback, useState } from "react"
-import { Button } from "@/components/ui/button"
-import { Card, CardContent } from "@/components/ui/card"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover"
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select"
-import { Toggle } from "@/components/ui/toggle"
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@/components/ui/tooltip"
-import { m } from "@/paraglide/messages.js"
-
-const DEFAULT_MODELS: Array<{ value: string; label: string }> = [
-  { value: "claude-sonnet-4-preview", label: "Claude Sonnet 4 (Preview)" },
-  { value: "claude-sonnet-3.7", label: "Claude Sonnet 3.7" },
-  { value: "gpt-4o", label: "GPT-4o" },
-  { value: "gpt-4", label: "GPT-4" },
-  { value: "gpt-3.5-turbo", label: "GPT-3.5 Turbo" },
-] as const
-
-const DEFAULT_AGENT_MODES: Array<{ value: string; label: string }> = [
-  { value: "auto", label: "Auto" },
-  { value: "agent", label: "Agent" },
-  { value: "plan", label: "Plan" },
-] as const
-
-interface ContextBadgeProps {
-  label: string
-  icon?: string
-  avatar?: string
-  onRemove: () => void
-}
-
-export function ContextBadge({ label, icon, avatar, onRemove }: ContextBadgeProps) {
-  return (
-    <span
-      className="inline-flex items-center gap-1 rounded-xl border bg-secondary p-0.5 font-medium text-muted-foreground text-xs"
-      style={{ whiteSpace: "nowrap", flex: "0 0 auto" }}
-    >
-      {icon && (
-        <span className="relative inline-block size-4 overflow-hidden rounded-full bg-white p-0.5 align-middle">
-          <span
-            style={{
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              width: "100%",
-              height: "100%",
-              fontSize: "12px",
-              lineHeight: 1,
-              objectFit: "cover",
-              borderRadius: "9999px",
-            }}
-          >
-            {icon}
-          </span>
-        </span>
-      )}
-      {avatar && (
-        <span className="relative inline-block h-4 w-4">
-          <img
-            alt={label}
-            className="rounded-full"
-            src={avatar}
-            style={{ objectFit: "cover", width: 16, height: 16 }}
-          />
-        </span>
-      )}
-      {label}
-      <button
-        aria-label={`${m.common_button_remove()} ${label}`}
-        className="rounded-full p-0.5 hover:bg-muted-foreground/10 focus:outline-none focus:ring-1 focus:ring-muted-foreground"
-        onClick={onRemove}
-        tabIndex={0}
-        type="button"
-      >
-        <X className="h-3 w-3 text-muted-foreground/60" />
-      </button>
-    </span>
-  )
-}
-
-interface ContextPopoverProps {
-  open: boolean
-  onOpenChange: (open: boolean) => void
-  selectedUsers: string[]
-  selectedPages: string[]
-  userOptions?: Array<{ id: string; name: string; avatar?: string }>
-  pageOptions?: Array<{ id: string; name: string; icon?: string }>
-  onUserToggle: (userId: string) => void
-  onPageToggle: (pageId: string) => void
-}
-
-export function ContextPopover({
-  open,
-  onOpenChange,
-  selectedUsers,
-  selectedPages,
-  userOptions = [],
-  pageOptions = [],
-  onUserToggle,
-  onPageToggle,
-}: ContextPopoverProps) {
-  return (
-    <Popover onOpenChange={onOpenChange} open={open}>
-      <PopoverTrigger render={<button aria-label={m.harness_context_add()}
-          className="inline-flex items-center gap-1 rounded-xl border bg-secondary px-2 py-0.5 font-medium text-muted-foreground text-xs transition"
-          style={{ whiteSpace: "nowrap", flex: "0 0 auto", height: "auto", appearance: "none", background: "none" }}
-          type="button" />}>
-          <Plus className="h-3 w-3 text-muted-foreground" />
-          <span>{m.harness_context_add()}</span>
-        </PopoverTrigger>
-      <PopoverContent align="start" className="z-30 w-max p-2">
-        <div className="flex flex-col gap-3">
-          {pageOptions.length > 0 && (
-            <div className="flex flex-col gap-1">
-              <div className="px-1 font-semibold text-muted-foreground text-xs uppercase tracking-wide">
-                {m.harness_context_pages()}
-              </div>
-              <div className="flex flex-col gap-1">
-                {pageOptions.map((page) => {
-                  const isSelected = selectedPages.includes(page.id)
-                  return (
-                    <button
-                      aria-pressed={isSelected}
-                      className={`inline-flex items-center justify-start gap-1 rounded-xl border px-2 py-0.5 font-medium text-xs transition ${
-                        isSelected
-                          ? "bg-secondary text-muted-foreground"
-                          : "border-transparent bg-background text-foreground"
-                      }`}
-                      key={page.id}
-                      onClick={() => onPageToggle(page.id)}
-                      style={{ fontWeight: 400, whiteSpace: "nowrap" }}
-                      type="button"
-                    >
-                      {page.icon && <span>{page.icon}</span>}
-                      {page.name}
-                    </button>
-                  )
-                })}
-              </div>
-            </div>
-          )}
-          {userOptions.length > 0 && (
-            <div className="flex flex-col gap-1">
-              <div className="px-1 font-semibold text-muted-foreground text-xs uppercase tracking-wide">
-                {m.harness_context_users()}
-              </div>
-              <div className="flex flex-col gap-1">
-                {userOptions.map((user) => {
-                  const isSelected = selectedUsers.includes(user.id)
-                  return (
-                    <button
-                      aria-pressed={isSelected}
-                      className={`inline-flex items-center justify-start gap-1 rounded-xl border p-0.5 font-medium text-xs transition ${
-                        isSelected
-                          ? "bg-secondary text-muted-foreground"
-                          : "border-transparent bg-background text-foreground hover:bg-accent hover:text-accent-foreground"
-                      }`}
-                      key={user.id}
-                      onClick={() => onUserToggle(user.id)}
-                      style={{ fontWeight: 400, whiteSpace: "nowrap" }}
-                      type="button"
-                    >
-                      {user.avatar && (
-                        <img
-                          alt={user.name}
-                          className="h-4 w-4 rounded-full"
-                          src={user.avatar}
-                        />
-                      )}
-                      {user.name}
-                    </button>
-                  )
-                })}
-              </div>
-            </div>
-          )}
-        </div>
-      </PopoverContent>
-    </Popover>
-  )
-}
-
-interface ContextSelectorProps {
-  selectedUsers: string[]
-  selectedPages: string[]
-  userOptions?: Array<{ id: string; name: string; avatar?: string }>
-  pageOptions?: Array<{ id: string; name: string; icon?: string }>
-  onUserToggle: (userId: string) => void
-  onPageToggle: (pageId: string) => void
-  onRemoveUser: (userId: string) => void
-  onRemovePage: (pageId: string) => void
-}
-
-export function ContextSelector({
-  selectedUsers,
-  selectedPages,
-  userOptions = [],
-  pageOptions = [],
-  onUserToggle,
-  onPageToggle,
-  onRemoveUser,
-  onRemovePage,
-}: ContextSelectorProps) {
-  const [popoverOpen, setPopoverOpen] = useState(false)
-  const hasSelectedContext =
-    selectedPages.length > 0 || selectedUsers.length > 0
-
-  return (
-    <div className="flex w-full flex-col gap-2">
-      <div className="flex w-full items-center gap-1">
-        <ContextPopover
-          onOpenChange={setPopoverOpen}
-          onPageToggle={onPageToggle}
-          onUserToggle={onUserToggle}
-          open={popoverOpen}
-          selectedPages={selectedPages}
-          selectedUsers={selectedUsers}
-          pageOptions={pageOptions}
-          userOptions={userOptions}
-        />
-        <div
-          aria-label={m.harness_context_selected()}
-          className="scroll-hide hidden flex-1 gap-1 overflow-x-auto sm:flex"
-          style={{ msOverflowStyle: "none", scrollbarWidth: "none" as const, WebkitOverflowScrolling: "touch", minWidth: 0 }}
-          tabIndex={0}
-        >
-          <style>{`.scroll-hide::-webkit-scrollbar { display: none !important; height: 0 !important; width: 0 !important; background: transparent !important; }`}</style>
-          {selectedPages.map((id) => {
-            const page = pageOptions.find((p) => p.id === id)
-            if (!page) return null
-            return (
-              <ContextBadge
-                icon={page.icon}
-                key={`page-${id}`}
-                label={page.name}
-                onRemove={() => onRemovePage(id)}
-              />
-            )
-          })}
-          {selectedUsers.map((id) => {
-            const user = userOptions.find((u) => u.id === id)
-            if (!user) return null
-            return (
-              <ContextBadge
-                avatar={user.avatar}
-                key={`user-${id}`}
-                label={user.name}
-                onRemove={() => onRemoveUser(id)}
-              />
-            )
-          })}
-        </div>
-      </div>
-      {hasSelectedContext && (
-        <div
-          aria-label={m.harness_context_selected()}
-          className="scroll-hide flex w-[18rem] gap-1 overflow-x-auto sm:hidden sm:w-full"
-          style={{ msOverflowStyle: "none", scrollbarWidth: "none" as const, WebkitOverflowScrolling: "touch", minWidth: 0 }}
-          tabIndex={0}
-        >
-          {selectedPages.map((id) => {
-            const page = pageOptions.find((p) => p.id === id)
-            if (!page) return null
-            return (
-              <ContextBadge
-                icon={page.icon}
-                key={`page-${id}`}
-                label={page.name}
-                onRemove={() => onRemovePage(id)}
-              />
-            )
-          })}
-          {selectedUsers.map((id) => {
-            const user = userOptions.find((u) => u.id === id)
-            if (!user) return null
-            return (
-              <ContextBadge
-                avatar={user.avatar}
-                key={`user-${id}`}
-                label={user.name}
-                onRemove={() => onRemoveUser(id)}
-              />
-            )
-          })}
-        </div>
-      )}
-    </div>
-  )
-}
-
-export interface ModelSelectProps {
-  value: string
-  onValueChange: (value: string) => void
-  models?: Array<{ value: string; label: string }>
-}
-
-export function ModelSelect({ value, onValueChange, models = DEFAULT_MODELS }: ModelSelectProps) {
-  return (
-    <Select onValueChange={(v) => onValueChange(v ?? "")} value={value}>
-      <SelectTrigger className="font-medium" size="default">
-        <SelectValue placeholder={m.harness_model_select_default()} />
-      </SelectTrigger>
-      <SelectContent className="text-sm">
-        {models.map((model) => (
-          <SelectItem key={model.value} value={model.value}>
-            {model.label}
-          </SelectItem>
-        ))}
-      </SelectContent>
-    </Select>
-  )
-}
-
-export interface AgentModeSelectProps {
-  value: string
-  onValueChange: (value: string) => void
-  modes?: Array<{ value: string; label: string }>
-}
-
-export function AgentModeSelect({ value, onValueChange, modes = DEFAULT_AGENT_MODES }: AgentModeSelectProps) {
-  return (
-    <Select onValueChange={(v) => onValueChange(v ?? "")} value={value}>
-      <SelectTrigger aria-label={m.harness_agent_mode()} className="font-medium">
-        <SelectValue placeholder={m.harness_agent_mode()} />
-      </SelectTrigger>
-      <SelectContent className="text-sm">
-        {modes.map((mode) => (
-          <SelectItem key={mode.value} value={mode.value}>
-            {mode.label}
-          </SelectItem>
-        ))}
-      </SelectContent>
-    </Select>
-  )
-}
-
-export interface LeftActionButtonsProps {
-  webSearchEnabled: boolean
-  thinkingEnabled: boolean
-  onWebSearchToggle: (enabled: boolean) => void
-  onThinkingToggle: (enabled: boolean) => void
-  webSearchDisabled?: boolean
-  webSearchDisabledReason?: string
-  thinkingDisabled?: boolean
-  thinkingDisabledReason?: string
-  onAttach?: () => void
-}
-
-export function LeftActionButtons({
-  webSearchEnabled,
-  thinkingEnabled,
-  onWebSearchToggle,
-  onThinkingToggle,
-  webSearchDisabled,
-  webSearchDisabledReason,
-  thinkingDisabled,
-  thinkingDisabledReason,
-  onAttach,
-}: LeftActionButtonsProps) {
-  return (
-    <>
-      <div className="hidden items-center justify-center gap-1 sm:flex">
-        <Tooltip>
-          <TooltipTrigger render={<Button aria-label={m.harness_attach_file()}
-              size="icon"
-              type="button"
-              variant="ghost"
-              onClick={onAttach} />}>
-              <Paperclip />
-            </TooltipTrigger>
-          <TooltipContent side="top">{m.harness_attach_file()}</TooltipContent>
-        </Tooltip>
-
-        <Tooltip>
-          <TooltipTrigger render={<Toggle aria-label={m.harness_thinking_toggle()}
-              onPressedChange={(p) => !thinkingDisabled && onThinkingToggle(p)}
-              pressed={thinkingEnabled}
-              size="default"
-              variant={thinkingEnabled ? "outline" : "default"}
-              disabled={thinkingDisabled} />}>
-              <Lightbulb />
-            </TooltipTrigger>
-          <TooltipContent side="top">
-            {thinkingDisabled ? thinkingDisabledReason : (thinkingEnabled ? m.harness_thinking_disable() : m.harness_thinking_enable())}
-          </TooltipContent>
-        </Tooltip>
-
-        <Tooltip>
-          <TooltipTrigger render={<Toggle aria-label={m.harness_web_search_toggle()}
-              className="relative flex w-9 min-w-9 items-center justify-center overflow-hidden p-0"
-              onPressedChange={(p) => !webSearchDisabled && onWebSearchToggle(p)}
-              pressed={webSearchEnabled}
-              size="default"
-              variant={webSearchEnabled ? "outline" : "default"}
-              disabled={webSearchDisabled} />}>
-              <span className="flex h-full w-full items-center justify-center opacity-100 transition-opacity duration-200">
-                <Globe />
-              </span>
-              <span
-                className={`absolute left-8 whitespace-nowrap font-medium text-sm transition-all duration-200 ${
-                  webSearchEnabled
-                    ? "visible left-9 ml-2 opacity-100"
-                    : "invisible left-4 opacity-0"
-                }`}
-                style={{ width: webSearchEnabled ? "auto" : 0, pointerEvents: webSearchEnabled ? "auto" : "none" }}
-              >
-                {m.harness_web_search_label()}
-              </span>
-            </TooltipTrigger>
-          <TooltipContent side="top">
-            {webSearchDisabled ? webSearchDisabledReason : (webSearchEnabled ? m.harness_web_search_disable() : m.harness_web_search_enable())}
-          </TooltipContent>
-        </Tooltip>
-      </div>
-
-      <DropdownMenu>
-        <DropdownMenuTrigger render={<Button aria-label={m.chat_actions_moreActions()}
-            className="sm:hidden"
-            size="icon"
-            type="button"
-            variant="ghost" />}>
-            <MoreHorizontal />
-          </DropdownMenuTrigger>
-        <DropdownMenuContent align="start">
-          <DropdownMenuItem onClick={onAttach}>
-            <Paperclip className="size-4" />
-            <span>{m.harness_attach_file()}</span>
-          </DropdownMenuItem>
-          <DropdownMenuSeparator />
-          <DropdownMenuItem onClick={() => onThinkingToggle(!thinkingEnabled)} disabled={thinkingDisabled}>
-            <Lightbulb className="size-4" />
-            <span>{m.harness_thinking_toggle()}</span>
-            {thinkingEnabled && <Check className="ml-auto size-4" />}
-          </DropdownMenuItem>
-          <DropdownMenuItem onClick={() => onWebSearchToggle(!webSearchEnabled)} disabled={webSearchDisabled}>
-            <Globe className="size-4" />
-            <span>{m.harness_web_search_toggle()}</span>
-            {webSearchEnabled && <Check className="ml-auto size-4" />}
-          </DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
-    </>
-  )
-}
-
-export interface RightActionButtonsProps {
-  input: string
-  isLoading?: boolean
-  onSend?: () => void
-  onStop?: () => void
-  sendLabel?: string
-  stopLabel?: string
-}
-
-export function RightActionButtons({
-  input,
-  isLoading,
-  onSend,
-  onStop,
-  sendLabel,
-  stopLabel,
-}: RightActionButtonsProps) {
-  const hasInput = input.trim().length > 0
-
-  const handleClick = () => {
-    if (isLoading) {
-      onStop?.()
-    } else {
-      onSend?.()
-    }
-  }
-
-  return (
-    <Tooltip>
-      <TooltipTrigger render={<Button aria-label={isLoading ? stopLabel ?? m.chat_actions_stop() : sendLabel ?? m.chat_actions_sendMessage()}
-          className={isLoading ? "animate-pulse" : ""}
-          disabled={!hasInput && !isLoading}
-          size="icon"
-          type={hasInput && !isLoading ? "submit" : "button"}
-          onClick={handleClick} />}>
-          {isLoading ? <Mic className="animate-pulse" /> : <Send />}
-        </TooltipTrigger>
-      <TooltipContent side="top">
-        {isLoading ? (stopLabel ?? m.chat_actions_stop()) : (sendLabel ?? m.chat_actions_sendMessage())}
-      </TooltipContent>
-    </Tooltip>
-  )
-}
-
-export interface AttachmentItem {
-  id: string
-  file: File
-  previewUrl?: string
-}
-
-export interface AIPromptInputProps {
-  value?: string
-  onChange?: (value: string) => void
-  onSubmit?: (value: string, attachments?: AttachmentItem[]) => void | Promise<void>
-  model?: string
-  onModelChange?: (model: string) => void
-  agentMode?: string
-  onAgentModeChange?: (mode: string) => void
-  webSearchEnabled?: boolean
-  onWebSearchToggle?: (enabled: boolean) => void
-  webSearchDisabled?: boolean
-  webSearchDisabledReason?: string
-  thinkingEnabled?: boolean
-  onThinkingToggle?: (enabled: boolean) => void
-  thinkingDisabled?: boolean
-  thinkingDisabledReason?: string
-  disabled?: boolean
-  placeholder?: string
-  rows?: number
-  models?: Array<{ value: string; label: string }>
-  agentModes?: Array<{ value: string; label: string }>
-  userOptions?: Array<{ id: string; name: string; avatar?: string }>
-  pageOptions?: Array<{ id: string; name: string; icon?: string }>
-  onAttach?: () => void
-  isLoading?: boolean
-  className?: string
-  attachments?: AttachmentItem[]
-  onAttachmentsChange?: (attachments: AttachmentItem[]) => void
-}
-
-export default function AIPromptInput({
-  value,
-  onChange,
-  onSubmit,
-  model,
-  onModelChange,
-  agentMode,
-  onAgentModeChange,
-  webSearchEnabled,
-  onWebSearchToggle,
-  webSearchDisabled,
-  webSearchDisabledReason,
-  thinkingEnabled,
-  onThinkingToggle,
-  thinkingDisabled,
-  thinkingDisabledReason,
-  disabled,
-  placeholder,
-  rows = 4,
-  models,
-  agentModes,
-  userOptions = [],
-  pageOptions = [],
-  onAttach,
-  isLoading,
-  className,
-  attachments,
-  onAttachmentsChange,
-}: AIPromptInputProps) {
-  const [internalInput, setInternalInput] = useState("")
-  const [internalModel, setInternalModel] = useState("gpt-3.5-turbo")
-  const [internalAgentMode, setInternalAgentMode] = useState("auto")
-  const [webSearch, setWebSearch] = useState(false)
-  const [thinking, setThinking] = useState(false)
-  const [selectedUsers, setSelectedUsers] = useState<string[]>([])
-  const [selectedPages, setSelectedPages] = useState<string[]>([])
-
-  const isControlled = value !== undefined
-  const input = isControlled ? value : internalInput
-  const setInput = isControlled ? onChange! : setInternalInput
-  const currentModel = model ?? internalModel
-  const setCurrentModel = onModelChange ?? setInternalModel
-  const currentAgentMode = agentMode ?? internalAgentMode
-  const setCurrentAgentMode = onAgentModeChange ?? setInternalAgentMode
-  const currentWebSearch = webSearchEnabled ?? webSearch
-  const setCurrentWebSearch = onWebSearchToggle ?? setWebSearch
-  const currentThinking = thinkingEnabled ?? thinking
-  const setCurrentThinking = onThinkingToggle ?? setThinking
-
-  const handleUserToggle = useCallback((userId: string) => {
-    setSelectedUsers((prev) =>
-      prev.includes(userId) ? prev.filter((id) => id !== userId) : [...prev, userId]
-    )
-  }, [])
-
-  const handlePageToggle = useCallback((pageId: string) => {
-    setSelectedPages((prev) =>
-      prev.includes(pageId) ? prev.filter((id) => id !== pageId) : [...prev, pageId]
-    )
-  }, [])
-
-  const handleRemoveUser = useCallback((userId: string) => {
-    setSelectedUsers((prev) => prev.filter((id) => id !== userId))
-  }, [])
-
-  const handleRemovePage = useCallback((pageId: string) => {
-    setSelectedPages((prev) => prev.filter((id) => id !== pageId))
-  }, [])
-
-  const handleSubmit = useCallback(
-    (e?: React.FormEvent) => {
-      e?.preventDefault()
-      if (!input.trim() || disabled) return
-      onSubmit?.(input, attachments)
-      if (!isControlled) setInternalInput("")
-    },
-    [input, disabled, onSubmit, isControlled, attachments]
-  )
-
-  return (
-    <TooltipProvider>
-      <div className={className}>
-        <Card className="w-full p-0 shadow-xs">
-          <CardContent className="p-0">
-            <form aria-label={m.chat_prompt_input()} className="flex flex-col gap-3" onSubmit={handleSubmit}>
-              <div className="flex w-full items-start justify-between p-4 pb-0">
-                <ContextSelector
-                  onPageToggle={handlePageToggle}
-                  onRemovePage={handleRemovePage}
-                  onRemoveUser={handleRemoveUser}
-                  onUserToggle={handleUserToggle}
-                  selectedPages={selectedPages}
-                  selectedUsers={selectedUsers}
-                  pageOptions={pageOptions}
-                  userOptions={userOptions}
-                />
-              </div>
-
-               <textarea
-                aria-label={placeholder ?? m.chat_prompt_inputLabel()}
-                className="resize-none border-none p-4 shadow-none focus-visible:ring-0 focus-visible:ring-offset-0"
-                disabled={disabled}
-                onChange={(e) => setInput(e.target.value)}
-                onKeyDown={(e) => {
-                  if ((e.metaKey || e.ctrlKey) && e.key === "Enter" && !e.shiftKey) {
-                    e.preventDefault()
-                    handleSubmit()
-                  }
-                }}
-                onPaste={(e) => {
-                  const items = e.clipboardData?.items
-                  if (!items) return
-                  const files: File[] = []
-                  for (const item of items) {
-                    if (item.kind === "file" && item.type.startsWith("image/")) {
-                      const file = item.getAsFile()
-                      if (file) files.push(file)
-                    }
-                  }
-                  if (files.length > 0 && onAttachmentsChange) {
-                    e.preventDefault()
-                    const newAttachments: AttachmentItem[] = files.map((file) => ({
-                      id: `att-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`,
-                      file,
-                      previewUrl: file.type.startsWith("image/") ? URL.createObjectURL(file) : undefined,
-                    }))
-                    onAttachmentsChange([...(attachments ?? []), ...newAttachments])
-                  }
-                }}
-                placeholder={placeholder ?? m.chat_prompt_placeholder()}
-                rows={rows}
-                value={input}
-              />
-
-              {attachments && attachments.length > 0 && onAttachmentsChange && (
-                <div className="px-4 pb-2">
-                  <div className="flex flex-wrap gap-2">
-                    {attachments.map((att) => (
-                      <div
-                        key={att.id}
-                        className="relative flex items-center gap-2 rounded-lg border bg-card p-2 text-xs"
-                      >
-                        {att.previewUrl ? (
-                          <img src={att.previewUrl} alt={att.file.name} className="size-8 rounded object-cover" />
-                        ) : (
-                          <span className="size-8 rounded bg-muted"><FileText className="size-4" /></span>
-                        )}
-                        <span className="max-w-[100px] truncate">{att.file.name}</span>
-                        <button
-                          aria-label="移除"
-                          className="rounded-full p-0.5 hover:bg-accent"
-                          onClick={() => {
-                            const next = attachments.filter((a) => a.id !== att.id)
-                            onAttachmentsChange(next)
-                            if (att.previewUrl) URL.revokeObjectURL(att.previewUrl)
-                          }}
-                          type="button"
-                        >
-                          <X className="size-3" />
-                        </button>
-                      </div>
-                    ))}
-                  </div>
-                </div>
-              )}
-
-              <div className="flex w-full items-center justify-between gap-2 p-4">
-                <div className="flex items-center justify-center gap-1">
-                  <LeftActionButtons
-                    onAttach={onAttach}
-                    onThinkingToggle={setCurrentThinking}
-                    onWebSearchToggle={setCurrentWebSearch}
-                    thinkingDisabled={thinkingDisabled}
-                    thinkingDisabledReason={thinkingDisabledReason}
-                    thinkingEnabled={currentThinking}
-                    webSearchDisabled={webSearchDisabled}
-                    webSearchDisabledReason={webSearchDisabledReason}
-                    webSearchEnabled={currentWebSearch}
-                  />
-                  {agentMode !== undefined && (
-                    <div className="hidden sm:block">
-                      <AgentModeSelect
-                        onValueChange={(v) => setCurrentAgentMode(v ?? "")}
-                        value={currentAgentMode}
-                        modes={agentModes}
-                      />
-                    </div>
-                  )}
-                </div>
-                <RightActionButtons
-                  input={input}
-                  isLoading={isLoading}
-                  onSend={() => handleSubmit()}
-                  onStop={() => {}}
-                />
-              </div>
-            </form>
-          </CardContent>
-        </Card>
-
-        {model !== undefined && (
-          <div className="flex w-full items-center justify-between gap-2 pt-1">
-            <ModelSelect
-              onValueChange={(v) => setCurrentModel(v ?? "")}
-              value={currentModel}
-              models={models}
-            />
-            {agentMode === undefined && (
-              <div className="sm:hidden">
-                <AgentModeSelect
-                  onValueChange={(v) => setCurrentAgentMode(v ?? "")}
-                  value={currentAgentMode}
-                  modes={agentModes}
-                />
-              </div>
-            )}
-          </div>
-        )}
-      </div>
-    </TooltipProvider>
-  )
-}