@allbluecn/web-app 0.19.2 → 0.19.4

package/src/components/ai/__tests__/web-search-card-url.test.tsx

@@ -0,0 +1,87 @@
+// @vitest-environment jsdom
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import { fireEvent, render, screen } from "@testing-library/react"
+import { describe, expect, it } from "vitest"
+import { WebSearchCard } from "../tool-cards/web-search-card"
+
+type CardProps = React.ComponentProps<typeof WebSearchCard>
+
+/** 测试夹具构造：绕开外部品牌类型的窄化（与 chat-ui.tsx 的 as never 传参同口径） */
+function fixture(
+  output: unknown,
+  query = "test",
+): CardProps {
+  return {
+    part: {
+      state: "output-available",
+      input: { query },
+      output,
+    },
+    result: { content: [] },
+  } as unknown as CardProps
+}
+
+describe("WebSearchCard 结果链接 scheme 白名单", () => {
+  it("http/https 结果渲染为外链", () => {
+    render(
+      <WebSearchCard
+        {...fixture({
+          results: [
+            { title: "正常结果", url: "https://example.com/a" },
+            { title: "http 结果", url: "http://example.com/b" },
+          ],
+        })}
+      />,
+    )
+    // 展开结果列表
+    fireEvent.click(screen.getByRole("button"))
+    const links = screen.getAllByRole("link")
+    expect(links).toHaveLength(2)
+    expect(links[0].getAttribute("href")).toBe("https://example.com/a")
+    expect(links[1].getAttribute("href")).toBe("http://example.com/b")
+  })
+
+  it("javascript:/data: 伪协议降级为纯文本，不产生 href sink", () => {
+    render(
+      <WebSearchCard
+        {...fixture({
+          results: [
+            { title: "恶意脚本", url: "javascript:alert(1)" },
+            { title: "数据协议", url: "data:text/html,<script>alert(1)</script>" },
+          ],
+        })}
+      />,
+    )
+    fireEvent.click(screen.getByRole("button"))
+    expect(screen.queryByRole("link")).toBeNull()
+    expect(screen.getByText("恶意脚本")).toBeInTheDocument()
+    expect(screen.getByText("数据协议")).toBeInTheDocument()
+  })
+
+  it("无法解析的 URL 同样降级为纯文本", () => {
+    render(
+      <WebSearchCard
+        {...fixture({ results: [{ title: "坏 URL", url: "  " }] })}
+      />,
+    )
+    fireEvent.click(screen.getByRole("button"))
+    expect(screen.queryByRole("link")).toBeNull()
+    expect(screen.getByText("坏 URL")).toBeInTheDocument()
+  })
+})

package/src/components/ai/ai-chat-prompt.tsx

@@ -34,15 +34,12 @@ import {
   TooltipTrigger,
 } from "@/components/ui/tooltip";
 import { AIPromptInput, DEFAULT_ACTIONS } from "@/components/ai/ai-prompt-input";
-import { filterImageFilesAndToast } from "@/components/ai/ai-prompt-input/image-filter";
 import { useSelectedModel } from "@/lib/ai/use-selected-model";
 import { useKnowledgeBases } from "@/lib/ai/use-knowledge-bases";
 import { WordRotate } from "@/components/magicui/word-rotate";
 import { ToolCallPartView } from "@/components/ai/tool-parts/tool-call-part";
 import { ToolResultPartView } from "@/components/ai/tool-parts/tool-result-part";
 import { stashSidebarDraft } from "@/lib/ai/chat-handoff";
-import { useAttachments } from "@/components/harness/composer/attachments/use-attachments";
-import { toast } from "@/components/ui/toast";
 import { m } from "@/paraglide/messages.js";
 
 export function AiChatPrompt({ hasAiKey }: { hasAiKey?: boolean | null }) {
@@ -70,7 +67,6 @@ export function AiChatPrompt({ hasAiKey }: { hasAiKey?: boolean | null }) {
 
   const configured = !!hasAiKey;
   const showHistory = messages.length > 0;
-  const { attachments, addFiles, removeAttachment } = useAttachments();
 
   return (
     <div className="mx-auto flex w-full max-w-2xl flex-col gap-4">
@@ -101,9 +97,9 @@ export function AiChatPrompt({ hasAiKey }: { hasAiKey?: boolean | null }) {
       {showHistory && (
         <ScrollArea className="max-h-80 rounded-xl border p-4">
           <div className="flex flex-col gap-3">
-            {messages.map((msg, idx) => (
+            {messages.map((msg) => (
               <div
-                key={idx}
+                key={msg.id}
                 className={cn(
                   "rounded-lg p-3 text-sm",
                   msg.role === "user"
@@ -190,7 +186,8 @@ export function AiChatPrompt({ hasAiKey }: { hasAiKey?: boolean | null }) {
             }
           }
           if (isLoading) return;
-          void sendMessage(input);
+          // 失败已由 useChat 的 error 态渲染，这里只吞掉 unhandledrejection
+          Promise.resolve(sendMessage(input)).catch(() => {});
         }}
         placeholder={configured ? m.chat_aiPrompt_placeholder() : m.chat_aiPrompt_placeholderNotConfigured()}
         disabled={!configured}
@@ -199,12 +196,6 @@ export function AiChatPrompt({ hasAiKey }: { hasAiKey?: boolean | null }) {
         actions={DEFAULT_ACTIONS}
         selectedModel={selectedModel}
         onModelChange={setSelectedModel}
-        attachments={attachments}
-        onAttachFiles={(files) => {
-          const images = filterImageFilesAndToast(files, m.composer_attach_imagesOnly(), (msg) => toast.info(msg));
-          if (images.length) void addFiles(images);
-        }}
-        onRemoveAttachment={removeAttachment}
       />
       </div>
 

package/src/components/ai/ai-prompt-input/components/action-buttons.tsx

@@ -26,7 +26,6 @@ import {
   Loader2,
   Mic,
   MoreHorizontal,
-  Paperclip,
   Send,
   Square,
 } from "lucide-react";
@@ -35,7 +34,6 @@ import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
-  DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { Toggle } from "@/components/ui/toggle";
@@ -84,16 +82,6 @@ export function LeftActionButtons({
   return (
     <>
       <div className="hidden items-center justify-center gap-1 sm:flex">
-        <Tooltip>
-          <TooltipTrigger render={<Button aria-label={m.chat_actions_attach()}
-              size="icon"
-              type="button"
-              variant="ghost" />}>
-              <Paperclip />
-            </TooltipTrigger>
-          <TooltipContent side="top">{m.chat_actions_attach()}</TooltipContent>
-        </Tooltip>
-
         {showThinking && (
           <Tooltip>
             <TooltipTrigger render={<Toggle aria-label={m.chat_actions_enableThinking()}
@@ -167,11 +155,6 @@ export function LeftActionButtons({
             <MoreHorizontal />
           </DropdownMenuTrigger>
         <DropdownMenuContent align="start">
-          <DropdownMenuItem onClick={() => {}}>
-            <Paperclip className="size-4" />
-            <span>{m.chat_actions_attach()}</span>
-          </DropdownMenuItem>
-          <DropdownMenuSeparator />
           {showThinking && (
             <DropdownMenuItem onClick={() => onThinkingToggle(!thinkingEnabled)}>
               {thinkingEnabled ? (
@@ -219,6 +202,8 @@ interface RightActionButtonsProps {
 export function RightActionButtons({ input, isLoading, onStop }: RightActionButtonsProps) {
   const hasInput = input.trim().length > 0;
   const showStop = isLoading && onStop !== undefined;
+  // 语音输入未实现：无输入且非 loading 时仅展示图标并禁用，避免「可点但无动作」的死按钮
+  const idle = !hasInput && !showStop;
   const label = showStop
     ? m.chat_actions_stopMessage()
     : hasInput
@@ -228,7 +213,7 @@ export function RightActionButtons({ input, isLoading, onStop }: RightActionButt
   return (
     <Tooltip>
       <TooltipTrigger render={<Button aria-label={label}
-          disabled={isLoading && !showStop}
+          disabled={idle || (isLoading && !showStop)}
           onClick={showStop ? onStop : undefined}
           size="icon"
           type={showStop ? "button" : hasInput ? "submit" : "button"} />}>

package/src/components/ai/ai-prompt-input/components/context-badge.tsx

@@ -23,11 +23,10 @@ import { m } from "@/paraglide/messages.js";
 export interface ContextBadgeProps {
   label: string;
   icon?: React.ReactNode;
-  avatar?: string;
   onRemove: () => void;
 }
 
-export function ContextBadge({ label, icon, avatar, onRemove }: ContextBadgeProps) {
+export function ContextBadge({ label, icon, 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"
@@ -36,17 +35,6 @@ export function ContextBadge({ label, icon, avatar, onRemove }: ContextBadgeProp
       {icon && (
         <span className="inline-flex shrink-0 items-center">{icon}</span>
       )}
-      {avatar && (
-        <span className="relative inline-block h-4 w-4">
-          <img
-            alt={label}
-            className="rounded-full"
-            loading="lazy"
-            src={avatar}
-            style={{ objectFit: "cover", width: "100%", height: "100%" }}
-          />
-        </span>
-      )}
       {label}
       <button
         aria-label={m.chat_context_remove({ label })}

package/src/components/ai/ai-prompt-input/components/kb-context-selector.tsx

@@ -23,6 +23,7 @@ import {
   PopoverContent,
   PopoverTrigger,
 } from "@/components/ui/popover";
+import { Button } from "@/components/ui/button";
 import { hideScrollbar, kbIcon } from "../constants";
 import { ContextBadge } from "./context-badge";
 import type { KnowledgeBaseItem } from "../types";
@@ -45,22 +46,16 @@ export function KbContextPopover({
 }: KbContextPopoverProps) {
   return (
     <Popover onOpenChange={onOpenChange} open={open}>
-      <PopoverTrigger render={<button aria-label={m.chat_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" />}>
+      <PopoverTrigger render={<Button aria-label={m.chat_context_add()}
+          className="h-auto gap-1 rounded-xl border bg-secondary px-2 py-0.5 font-medium text-muted-foreground text-xs whitespace-nowrap"
+          size="sm"
+          variant="ghost" />}>
           <Plus className="h-3 w-3 text-muted-foreground" />
           <span>{m.chat_context_add()}</span>
         </PopoverTrigger>
       <PopoverContent align="start" className="z-30 w-max p-2">
         <div className="flex flex-col gap-3">
-          {knowledgeBases.length > 0 && (
+          {knowledgeBases.length > 0 ? (
             <div className="flex flex-col gap-1">
               <div className="px-1 font-semibold text-muted-foreground text-xs uppercase tracking-wide">
                 {m.chat_context_knowledgeBase()}
@@ -69,24 +64,25 @@ export function KbContextPopover({
                 {knowledgeBases.map((kb) => {
                   const isSelected = selectedKbs.includes(kb.id);
                   return (
-                    <button
+                    <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"
-                      }`}
+                      className="justify-start gap-1 rounded-xl border px-2 py-0.5 font-normal text-xs whitespace-nowrap"
                       key={kb.id}
                       onClick={() => onKbToggle(kb.id)}
-                      style={{ fontWeight: 400, whiteSpace: "nowrap" }}
+                      size="sm"
                       type="button"
+                      variant={isSelected ? "secondary" : "ghost"}
                     >
                       {kbIcon(kb.icon)} {kb.name}
-                    </button>
+                    </Button>
                   );
                 })}
               </div>
             </div>
+          ) : (
+            <div className="px-2 py-1 text-muted-foreground text-xs">
+              {m.chat_context_noKnowledgeBase()}
+            </div>
           )}
         </div>
       </PopoverContent>
@@ -130,14 +126,6 @@ export function KbContextSelector({
           }}
           tabIndex={0}
         >
-          <style>
-            {`.scroll-hide::-webkit-scrollbar {
-              display: none !important;
-              height: 0 !important;
-              width: 0 !important;
-              background: transparent !important;
-            }`}
-          </style>
           {selectedKbs.map((id) => {
             const kb = knowledgeBases.find((k) => k.id === id);
             if (!kb) return null;

package/src/components/ai/ai-prompt-input/components/model-select.tsx

@@ -16,7 +16,7 @@
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 
-import { useEffect, useState } from "react";
+import { useQuery } from "@tanstack/react-query";
 import {
   Select,
   SelectContent,
@@ -52,24 +52,18 @@ interface ModelSelectProps {
 }
 
 export function ModelSelect({ value, onValueChange }: ModelSelectProps) {
-  const [models, setModels] = useState<ModelItem[]>([]);
-  const [loading, setLoading] = useState(true);
-
-  useEffect(() => {
-    listEnabledModelsFn()
-      .then((data) => {
-        setModels(data as ModelItem[]);
-        setLoading(false);
-      })
-      .catch(() => setLoading(false));
-  }, []);
+  const { data, isLoading, isError } = useQuery({
+    queryKey: ["enabled-models"],
+    queryFn: () => listEnabledModelsFn(),
+  });
+  const models = (data as ModelItem[] | undefined) ?? [];
 
   const grouped = models.reduce<Record<string, ModelItem[]>>((acc, m) => {
     (acc[m.providerId] ||= []).push(m);
     return acc;
   }, {});
 
-  if (loading) {
+  if (isLoading) {
     return (
       <Select disabled value="">
         <SelectTrigger className="font-medium" size="default">
@@ -79,6 +73,16 @@ export function ModelSelect({ value, onValueChange }: ModelSelectProps) {
     );
   }
 
+  if (isError) {
+    return (
+      <Select disabled value="">
+        <SelectTrigger className="font-medium" size="default">
+          <SelectValue placeholder={m.chat_model_loadFailed()} />
+        </SelectTrigger>
+      </Select>
+    );
+  }
+
   if (models.length === 0) {
     return (
       <Select disabled value="">
@@ -89,8 +93,11 @@ export function ModelSelect({ value, onValueChange }: ModelSelectProps) {
     );
   }
 
+  // value 不在可用列表（模型被停用/已删除）时不回显原始 id，回落 placeholder
+  const knownValue = models.some((m) => m.model === value) ? value : undefined;
+
   return (
-    <Select onValueChange={(v) => onValueChange(v ?? "")} value={value}>
+    <Select onValueChange={(v) => onValueChange(v ?? "")} value={knownValue}>
       <SelectTrigger className="font-medium" size="default">
         <SelectValue placeholder={m.chat_model_select()} />
       </SelectTrigger>

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

@@ -27,24 +27,6 @@ export function kbIcon(icon: string, className = "size-3"): React.ReactNode {
   return <Icon className={className} />;
 }
 
-export const mockUsers = [
-  {
-    id: "shadcn",
-    name: "shadcn",
-    avatar: "https://github.com/shadcn.png",
-  },
-  {
-    id: "preetsuthar17",
-    name: "preetsuthar17",
-    avatar: "https://github.com/preetsuthar17.png",
-  },
-  {
-    id: "evilrabbit",
-    name: "evilrabbit",
-    avatar: "https://github.com/evilrabbit.png",
-  },
-];
-
 export const agentModes = [
   { value: "auto" },
   { value: "agent" },

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

@@ -26,7 +26,6 @@ import { AgentModeSelect } from "./components/agent-mode-select";
 import { LeftActionButtons, RightActionButtons } from "./components/action-buttons";
 import { KbContextSelector } from "./components/kb-context-selector";
 import { ModelSelect } from "./components/model-select";
-import { PageUserContextSelector } from "./components/page-user-context-selector";
 import { SlashSkillMenu } from "@/components/agents/slash-skill-menu";
 import { PluginMentionMenu } from "@/components/harness/plugin-mention-menu";
 import type { KnowledgeBaseItem, PromptAction } from "./types";
@@ -74,7 +73,7 @@ export interface AIPromptInputProps {
   headerMiddleSlot?: React.ReactNode;
   slashSkills?: boolean;
   pluginMentions?: boolean;
-  /** compact 时隐藏 context 选择器（PageUserContextSelector / KbContextSelector）与底部模型行（ModelSelect / AgentModeSelect）。 */
+  /** compact 时隐藏 context 选择器（KbContextSelector）与底部模型行（ModelSelect / AgentModeSelect）。 */
   compact?: boolean;
   attachments?: Attachment[];
   onAttachFiles?: (files: File[]) => void;
@@ -125,10 +124,8 @@ export function AIPromptInput({
   const model = externalModel ?? internalModel;
   const setModel = onModelChange ?? setInternalModel;
   const [internalAgentMode, setInternalAgentMode] = useState("auto");
-  const [contextOptions, setContextOptions] = useState<string[]>([]);
   const [internalWebSearchEnabled, setInternalWebSearchEnabled] = useState(false);
   const [internalThinkingEnabled, setInternalThinkingEnabled] = useState(false);
-  const [selectedUsers, setSelectedUsers] = useState<string[]>([]);
   const [selectedKbs, setSelectedKbs] = useState<string[]>([]);
 
   const isControlled = externalInput !== undefined;
@@ -205,36 +202,16 @@ export function AIPromptInput({
   const agentMode = externalAgentMode ?? internalAgentMode;
   const setAgentMode = onAgentModeChange ?? setInternalAgentMode;
 
-  const hasPageUserContext = knowledgeBases.length === 0;
-
   const handleInputChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
     handleTextareaChange(e);
   };
 
-  const handleUserToggle = (userId: string) => {
-    setSelectedUsers((prev) =>
-      prev.includes(userId)
-        ? prev.filter((id) => id !== userId)
-        : [...prev, userId]
-    );
-    if (!contextOptions.includes("users")) {
-      setContextOptions((prev) => [...prev, "users"]);
-    }
-  };
-
-  const handleRemoveUser = (userId: string) => {
-    setSelectedUsers((prev) => prev.filter((id) => id !== userId));
-  };
-
   const handleKbToggle = (kbId: string) => {
     setSelectedKbs((prev) =>
       prev.includes(kbId)
         ? prev.filter((id) => id !== kbId)
         : [...prev, kbId]
     );
-    if (!contextOptions.includes("knowledge")) {
-      setContextOptions((prev) => [...prev, "knowledge"]);
-    }
   };
 
   const handleRemoveKb = (kbId: string) => {
@@ -248,9 +225,7 @@ export function AIPromptInput({
       if (isLoading && !opts?.whenBusy) return;
 
       if (onSubmit) {
-        const hasContext =
-          selectedKbs.length > 0 ||
-          selectedUsers.length > 0;
+        const hasContext = selectedKbs.length > 0;
         onSubmit(inputValue.trim(), hasContext);
         if (!isControlled) {
           setInternalInput("");
@@ -261,17 +236,10 @@ export function AIPromptInput({
           setInternalInput("");
         }
       } else {
-        console.log(m.chat_prompt_submitLabel(), {
-          input: inputValue.trim(),
-          model,
-          agentMode,
-          contextOptions,
-          webSearchEnabled,
-          codeModeEnabled,
-          thinkingEnabled,
-          selectedUsers,
-          selectedKbs,
-        });
+        // 无处理器的兜底分支：不向控制台输出用户输入（PII），仅 dev 环境提示接线缺失
+        if (import.meta.env.DEV) {
+          console.warn("[AIPromptInput] no onSend/onSubmit handler provided");
+        }
         if (!isControlled) {
           setInternalInput("");
         }
@@ -284,24 +252,11 @@ export function AIPromptInput({
       onSubmit,
       externalOnSend,
       isControlled,
-      model,
-      agentMode,
-      contextOptions,
-      webSearchEnabled,
-      codeModeEnabled,
-      thinkingEnabled,
-      selectedUsers,
       selectedKbs,
     ]
   );
 
-  const contextSelectorNode = hasPageUserContext ? (
-    <PageUserContextSelector
-      onRemoveUser={handleRemoveUser}
-      onUserToggle={handleUserToggle}
-      selectedUsers={selectedUsers}
-    />
-  ) : (
+  const contextSelectorNode = (
     <KbContextSelector
       onKbToggle={handleKbToggle}
       onRemoveKb={handleRemoveKb}
@@ -311,6 +266,40 @@ export function AIPromptInput({
   );
   const compactContextSelectorNode = compact ? null : contextSelectorNode;
 
+  // 仅当调用方提供 onSend（支持 whenBusy 契约）时才允许 loading 中打断；
+  // 只有 onSubmit 的调用方没有打断语义，保持输入不被清空静默丢弃
+  const supportsInterrupt = externalOnSend !== undefined;
+
+  // 三处分支（slash/mention/默认）共用同一 Textarea 形态，仅 placeholder 与
+  // Escape 行为不同——收敛到单一渲染函数，避免改一处漏两处
+  const renderTextarea = (opts: { placeholder: string; onEscape?: () => void }) => (
+    <Textarea
+      // w-[97.6%] 为任意值：需在 ml-4 左边距下给右侧留出细缝且不出现横向
+      // 溢出，标准间距组合无法同时表达（96% 会溢出，w-full+pr 需改 DOM 结构）
+      className="resize-none border-none p-4 mt-4 w-[97.6%] ml-4 shadow-none focus-visible:ring-0 focus-visible:ring-offset-0"
+      disabled={disabled}
+      onChange={handleInputChange}
+      onKeyDown={(e) => {
+        if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
+          handleSubmit();
+        }
+        if (e.key === "Enter" && e.shiftKey && isLoading) {
+          e.preventDefault();
+          handleSubmit(
+            undefined,
+            supportsInterrupt ? { whenBusy: "interrupt" } : undefined,
+          );
+        }
+        if (e.key === "Escape") {
+          opts.onEscape?.();
+        }
+      }}
+      placeholder={opts.placeholder}
+      rows={4}
+      value={inputValue}
+    />
+  );
+
   return (
     <div className="flex w-full flex-col items-center gap-2">
       {externalContextBar && (
@@ -407,75 +396,23 @@ export function AIPromptInput({
                 open={slashMenuOpen}
                 onOpenChange={setSlashMenuOpen}
                 applyTemplate={applySlashTemplate}
-                trigger={
-                  <Textarea
-                    className="resize-none border-none p-4 mt-4 w-[97.6%] ml-4 shadow-none focus-visible:ring-0 focus-visible:ring-offset-0"
-                    disabled={disabled}
-                    onChange={handleInputChange}
-                onKeyDown={(e) => {
-                    if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
-                      handleSubmit();
-                    }
-                    if (e.key === "Enter" && e.shiftKey && isLoading) {
-                      e.preventDefault();
-                      handleSubmit(undefined, { whenBusy: "interrupt" });
-                    }
-                    if (e.key === "Escape") {
-                      setSlashMenuOpen(false);
-                    }
-                  }}
-                    placeholder={placeholder ?? m.chat_slashCommands_placeholder()}
-                    rows={4}
-                    value={inputValue}
-                  />
-                }
+                trigger={renderTextarea({
+                  placeholder: placeholder ?? m.chat_slashCommands_placeholder(),
+                  onEscape: () => setSlashMenuOpen(false),
+                })}
               />
             ) : isPluginMentionInput ? (
               <PluginMentionMenu
                 open={pluginMentionOpen}
                 onOpenChange={setPluginMentionOpen}
                 applyMention={applyMention}
-                trigger={
-                  <Textarea
-                    className="resize-none border-none p-4 mt-4 w-[97.6%] ml-4 shadow-none focus-visible:ring-0 focus-visible:ring-offset-0"
-                    disabled={disabled}
-                    onChange={handleInputChange}
-                onKeyDown={(e) => {
-                    if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
-                      handleSubmit();
-                    }
-                    if (e.key === "Enter" && e.shiftKey && isLoading) {
-                      e.preventDefault();
-                      handleSubmit(undefined, { whenBusy: "interrupt" });
-                    }
-                    if (e.key === "Escape") {
-                      setPluginMentionOpen(false);
-                    }
-                  }}
-                    placeholder={placeholder ?? m.chat_prompt_placeholder()}
-                    rows={4}
-                    value={inputValue}
-                  />
-                }
+                trigger={renderTextarea({
+                  placeholder: placeholder ?? m.chat_prompt_placeholder(),
+                  onEscape: () => setPluginMentionOpen(false),
+                })}
               />
             ) : (
-              <Textarea
-                className="resize-none border-none p-4 mt-4 w-[97.6%] ml-4 shadow-none focus-visible:ring-0 focus-visible:ring-offset-0"
-                disabled={disabled}
-                onChange={handleInputChange}
-                onKeyDown={(e) => {
-                    if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
-                      handleSubmit();
-                    }
-                    if (e.key === "Enter" && e.shiftKey && isLoading) {
-                      e.preventDefault();
-                      handleSubmit(undefined, { whenBusy: "interrupt" });
-                    }
-                  }}
-                placeholder={placeholder ?? m.chat_prompt_placeholder()}
-                rows={4}
-                value={inputValue}
-              />
+              renderTextarea({ placeholder: placeholder ?? m.chat_prompt_placeholder() })
             )}
 
             <div className="px-4 pb-0 text-[11px] text-muted-foreground/60 leading-none -mt-1">