@allbluecn/web-app 0.12.0 → 0.12.2

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

@@ -17,6 +17,7 @@
 
 "use client";
 
+import { useCallback } from "react";
 import { useChat, fetchServerSentEvents } from "@tanstack/ai-react";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import { Button } from "@/components/ui/button";
@@ -27,31 +28,40 @@ import {
   AlertCircle,
   Maximize,
 } from "lucide-react";
-import { Link as RouterLink, useNavigate } from "@tanstack/react-router";
+import { Link as RouterLink } from "@tanstack/react-router";
 import {
   Tooltip,
   TooltipContent,
   TooltipTrigger,
 } from "@/components/ui/tooltip";
-import { AIPromptInput, DEFAULT_ACTIONS } from "@/components/chat/ai-prompt-input";
-import { useSelectedModel } from "@/components/ai/use-selected-model";
-import { useKnowledgeBases } from "@/components/ai/use-knowledge-bases";
+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 { stashPendingWorkspaceMessage } from "@/lib/chat-handoff";
+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 }) {
   const knowledgeBases = useKnowledgeBases();
   const [selectedModel, setSelectedModel] = useSelectedModel();
-  const navigate = useNavigate();
+
+  const openGlobalSidebar = useCallback(() => {
+    window.dispatchEvent(new Event("allblue:open-global-sidebar"));
+  }, []);
 
   const { messages, sendMessage, isLoading, error } = useChat({
     connection: fetchServerSentEvents("/api/chat"),
-    body: { systemPrompts: [m.chat_systemPrompt()], model: selectedModel },
+    body: { model: selectedModel, promptKey: 'chat.default' },
   });
 
   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">
@@ -86,16 +96,37 @@ export function AiChatPrompt({ hasAiKey }: { hasAiKey?: boolean | null }) {
               <div
                 key={idx}
                 className={cn(
-                  "rounded-lg p-3 text-sm whitespace-pre-wrap",
+                  "rounded-lg p-3 text-sm",
                   msg.role === "user"
                     ? "bg-primary text-primary-foreground ml-8"
                     : "bg-muted mr-8"
                 )}
               >
-                {msg.parts.map((part) => {
-                  if (part.type === "text") return part.content;
-                  return null;
-                }).join("")}
+                <div className="flex flex-col gap-1.5">
+                  {msg.parts.map((part, partIdx) => {
+                    if (part.type === "text") {
+                      return (
+                        <span key={partIdx} className="whitespace-pre-wrap">
+                          {part.content}
+                        </span>
+                      );
+                    }
+                    if (part.type === "tool-call") {
+                      return (
+                        <ToolCallPartView key={part.id || partIdx} part={part} />
+                      );
+                    }
+                    if (part.type === "tool-result") {
+                      return (
+                        <ToolResultPartView
+                          key={part.toolCallId || partIdx}
+                          part={part}
+                        />
+                      );
+                    }
+                    return null;
+                  })}
+                </div>
               </div>
             ))}
             {isLoading && (
@@ -135,22 +166,17 @@ export function AiChatPrompt({ hasAiKey }: { hasAiKey?: boolean | null }) {
         }
         headerRightSlot={
           <Tooltip>
-            <TooltipTrigger asChild>
-              <Button asChild variant="ghost" size="icon" className="size-8">
-                <RouterLink to="/chat">
+            <TooltipTrigger render={<Button render={<RouterLink to="/harness" />} variant="ghost" size="icon" className="size-8" nativeButton={false} />}>
                   <Maximize className="size-4" />
-                </RouterLink>
-              </Button>
-            </TooltipTrigger>
+                </TooltipTrigger>
             <TooltipContent>{m.chat_aiPrompt_enterFullChat()}</TooltipContent>
           </Tooltip>
         }
         onSubmit={(input: string, hasContext: boolean) => {
           if (!configured) return;
           if (!hasContext) {
-            const stashed = stashPendingWorkspaceMessage(input);
-            if (stashed) {
-              void navigate({ to: "/chat" });
+            if (stashSidebarDraft(input)) {
+              openGlobalSidebar();
               return;
             }
           }
@@ -164,6 +190,12 @@ 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/{chat → ai}/ai-prompt-input/components/action-buttons.tsx

@@ -19,6 +19,7 @@
 
 import {
   Check,
+  Code2,
   Globe,
   GlobeOff,
   Lightbulb,
@@ -28,6 +29,7 @@ import {
   MoreHorizontal,
   Paperclip,
   Send,
+  Square,
 } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import {
@@ -50,6 +52,12 @@ interface LeftActionButtonsProps {
   thinkingEnabled: boolean;
   onWebSearchToggle: (enabled: boolean) => void;
   onThinkingToggle: (enabled: boolean) => void;
+  codeModeEnabled: boolean;
+  onCodeModeToggle: (enabled: boolean) => void;
+  webSearchDisabled?: boolean;
+  webSearchDisabledReason?: string;
+  codeModeDisabled?: boolean;
+  codeModeDisabledReason?: string;
 }
 
 export function LeftActionButtons({
@@ -57,51 +65,55 @@ export function LeftActionButtons({
   thinkingEnabled,
   onWebSearchToggle,
   onThinkingToggle,
+  codeModeEnabled,
+  onCodeModeToggle,
+  webSearchDisabled = false,
+  webSearchDisabledReason,
+  codeModeDisabled = false,
+  codeModeDisabledReason,
 }: LeftActionButtonsProps) {
+  const webSearchTooltip = webSearchDisabled
+    ? (webSearchDisabledReason ?? m.chat_searchUnavailable())
+    : (webSearchEnabled ? m.chat_actions_disableWebSearch() : m.chat_actions_enableWebSearch())
+  const codeModeTooltip = codeModeDisabled
+    ? (codeModeDisabledReason ?? m.chat_actions_codeModeUnavailable())
+    : (codeModeEnabled ? m.chat_actions_disableCodeMode() : m.chat_actions_enableCodeMode())
+
   return (
     <>
       <div className="hidden items-center justify-center gap-1 sm:flex">
         <Tooltip>
-          <TooltipTrigger asChild>
-            <Button
-              aria-label={m.chat_actions_attach()}
+          <TooltipTrigger render={<Button aria-label={m.chat_actions_attach()}
               size="icon"
               type="button"
-              variant="ghost"
-            >
+              variant="ghost" />}>
               <Paperclip />
-            </Button>
-          </TooltipTrigger>
+            </TooltipTrigger>
           <TooltipContent side="top">{m.chat_actions_attach()}</TooltipContent>
         </Tooltip>
 
         <Tooltip>
-          <TooltipTrigger asChild>
-            <Toggle
-              aria-label={m.chat_actions_enableThinking()}
+          <TooltipTrigger render={<Toggle aria-label={m.chat_actions_enableThinking()}
               className="flex w-9 min-w-9 items-center justify-center p-0"
               onPressedChange={onThinkingToggle}
               pressed={thinkingEnabled}
-              size="default"
-            >
+              size="default" />}>
               {thinkingEnabled ? <Lightbulb /> : <LightbulbOff />}
-            </Toggle>
-          </TooltipTrigger>
+            </TooltipTrigger>
           <TooltipContent side="top">
             {thinkingEnabled ? m.chat_actions_disableThinking() : m.chat_actions_enableThinking()}
           </TooltipContent>
         </Tooltip>
 
         <Tooltip>
-          <TooltipTrigger asChild>
-            <Toggle
-              aria-label={m.chat_actions_enableWebSearch()}
+          <TooltipTrigger render={<Toggle aria-label={m.chat_actions_enableWebSearch()}
+              aria-disabled={webSearchDisabled || undefined}
               className="relative flex w-9 min-w-9 items-center justify-center overflow-hidden p-0"
-              onPressedChange={onWebSearchToggle}
+              onPressedChange={webSearchDisabled ? () => undefined : onWebSearchToggle}
               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">
                 {webSearchEnabled ? <Globe /> : <GlobeOff />}
               </span>
@@ -118,26 +130,38 @@ export function LeftActionButtons({
               >
                 {m.chat_actions_webSearch()}
               </span>
-            </Toggle>
-          </TooltipTrigger>
+            </TooltipTrigger>
           <TooltipContent side="top">
-            {webSearchEnabled ? m.chat_actions_disableWebSearch() : m.chat_actions_enableWebSearch()}
+            {webSearchTooltip}
           </TooltipContent>
         </Tooltip>
+
+        <Tooltip>
+          <TooltipTrigger render={<Toggle aria-label={m.chat_actions_codeMode()}
+              className="flex w-9 min-w-9 items-center justify-center p-0"
+              disabled={codeModeDisabled}
+              onPressedChange={onCodeModeToggle}
+              pressed={codeModeEnabled && !codeModeDisabled}
+              size="default"
+              variant={codeModeEnabled && !codeModeDisabled ? "outline" : "default"} />}>
+              {codeModeEnabled ? (
+                <Code2 className="text-primary" />
+              ) : (
+                <Code2 />
+              )}
+            </TooltipTrigger>
+          <TooltipContent side="top">{codeModeTooltip}</TooltipContent>
+        </Tooltip>
       </div>
 
       <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button
-            aria-label={m.chat_actions_moreOptions()}
+        <DropdownMenuTrigger render={<Button aria-label={m.chat_actions_moreOptions()}
             className="sm:hidden"
             size="icon"
             type="button"
-            variant="ghost"
-          >
+            variant="ghost" />}>
             <MoreHorizontal />
-          </Button>
-        </DropdownMenuTrigger>
+          </DropdownMenuTrigger>
         <DropdownMenuContent align="start">
           <DropdownMenuItem onClick={() => {}}>
             <Paperclip className="size-4" />
@@ -154,6 +178,7 @@ export function LeftActionButtons({
             {thinkingEnabled && <Check className="ml-auto size-4" />}
           </DropdownMenuItem>
           <DropdownMenuItem
+            disabled={webSearchDisabled}
             onClick={() => onWebSearchToggle(!webSearchEnabled)}
           >
             {webSearchEnabled ? (
@@ -164,6 +189,14 @@ export function LeftActionButtons({
             <span>{m.chat_actions_webSearch()}</span>
             {webSearchEnabled && <Check className="ml-auto size-4" />}
           </DropdownMenuItem>
+          <DropdownMenuItem
+            disabled={codeModeDisabled}
+            onClick={() => onCodeModeToggle(!codeModeEnabled)}
+          >
+            <Code2 className="size-4" />
+            <span>{m.chat_actions_codeMode()}</span>
+            {codeModeEnabled && <Check className="ml-auto size-4" />}
+          </DropdownMenuItem>
         </DropdownMenuContent>
       </DropdownMenu>
     </>
@@ -173,32 +206,37 @@ export function LeftActionButtons({
 interface RightActionButtonsProps {
   input: string;
   isLoading?: boolean;
+  /** loading 态提供时，发送按钮切换为「停止」按钮（type=button，不参与表单提交）。 */
+  onStop?: () => void;
 }
 
-export function RightActionButtons({ input, isLoading }: RightActionButtonsProps) {
+export function RightActionButtons({ input, isLoading, onStop }: RightActionButtonsProps) {
   const hasInput = input.trim().length > 0;
+  const showStop = isLoading && onStop !== undefined;
+  const label = showStop
+    ? m.chat_actions_stopMessage()
+    : hasInput
+      ? m.chat_actions_sendMessage()
+      : m.chat_actions_voiceInput();
 
   return (
     <Tooltip>
-      <TooltipTrigger asChild>
-        <Button
-          aria-label={hasInput ? m.chat_actions_sendMessage() : m.chat_actions_voiceInput()}
-          disabled={isLoading}
+      <TooltipTrigger render={<Button aria-label={label}
+          disabled={isLoading && !showStop}
+          onClick={showStop ? onStop : undefined}
           size="icon"
-          type={hasInput ? "submit" : "button"}
-        >
-          {isLoading ? (
+          type={showStop ? "button" : hasInput ? "submit" : "button"} />}>
+          {showStop ? (
+            <Square className="size-4 fill-current" />
+          ) : isLoading ? (
             <Loader2 className="size-4 animate-spin" />
           ) : hasInput ? (
             <Send />
           ) : (
             <Mic />
           )}
-        </Button>
-      </TooltipTrigger>
-      <TooltipContent side="top">
-        {hasInput ? m.chat_actions_sendMessage() : m.chat_actions_voiceInput()}
-      </TooltipContent>
+        </TooltipTrigger>
+      <TooltipContent side="top">{label}</TooltipContent>
     </Tooltip>
   );
 }

package/src/components/{chat → ai}/ai-prompt-input/components/agent-mode-select.tsx

@@ -40,7 +40,7 @@ export interface AgentModeSelectProps {
 
 export function AgentModeSelect({ value, onValueChange }: AgentModeSelectProps) {
   return (
-    <Select onValueChange={onValueChange} value={value}>
+    <Select onValueChange={(v) => onValueChange(v ?? "")} value={value}>
       <SelectTrigger aria-label={m.chat_agentMode_label()} className="font-medium">
         <SelectValue placeholder={m.chat_agentMode_placeholder()} />
       </SelectTrigger>

package/src/components/{chat → ai}/ai-prompt-input/components/kb-context-selector.tsx

@@ -46,9 +46,7 @@ export function KbContextPopover({
 }: KbContextPopoverProps) {
   return (
     <Popover onOpenChange={onOpenChange} open={open}>
-      <PopoverTrigger asChild>
-        <button
-          aria-label={m.chat_context_add()}
+      <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",
@@ -57,12 +55,10 @@ export function KbContextPopover({
             appearance: "none",
             background: "none",
           }}
-          type="button"
-        >
+          type="button" />}>
           <Plus className="h-3 w-3 text-muted-foreground" />
           <span>{m.chat_context_add()}</span>
-        </button>
-      </PopoverTrigger>
+        </PopoverTrigger>
       <PopoverContent align="start" className="z-30 w-max p-2">
         <div className="flex flex-col gap-3">
           {knowledgeBases.length > 0 && (

package/src/components/{chat → ai}/ai-prompt-input/components/model-select.tsx

@@ -91,7 +91,7 @@ export function ModelSelect({ value, onValueChange }: ModelSelectProps) {
   }
 
   return (
-    <Select onValueChange={onValueChange} value={value}>
+    <Select onValueChange={(v) => onValueChange(v ?? "")} value={value}>
       <SelectTrigger className="font-medium" size="default">
         <SelectValue placeholder={m.chat_model_select()} />
       </SelectTrigger>

package/src/components/{chat → ai}/ai-prompt-input/components/page-user-context-selector.tsx

@@ -43,9 +43,7 @@ export function PageUserContextPopover({
 }: PageUserContextPopoverProps) {
   return (
     <Popover onOpenChange={onOpenChange} open={open}>
-      <PopoverTrigger asChild>
-        <button
-          aria-label={m.chat_context_add()}
+      <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",
@@ -54,12 +52,10 @@ export function PageUserContextPopover({
             appearance: "none",
             background: "none",
           }}
-          type="button"
-        >
+          type="button" />}>
           <Plus className="h-3 w-3 text-muted-foreground" />
           <span>{m.chat_context_add()}</span>
-        </button>
-      </PopoverTrigger>
+        </PopoverTrigger>
       <PopoverContent align="start" className="z-30 w-max p-2">
         <div className="flex flex-col gap-3">
           <div className="flex flex-col gap-1">

package/src/components/ai/ai-prompt-input/image-filter.ts

@@ -0,0 +1,22 @@
+// 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/>.
+
+export function filterImageFilesAndToast(files: File[], imagesOnlyMessage: string, toastInfo: (msg: string) => void): File[] {
+  const images = files.filter((f) => f.type.startsWith("image/"))
+  if (images.length < files.length) toastInfo(imagesOnlyMessage)
+  return images
+}