GenAI tweaks (#22756)

* add DictAsYamlField for genai provider and runtime options

* regenerate config translations

* chat tweaks

- add page title
- scroll if near bottom
- add tool call group that dynamically updates as tool calls are made
- add bouncing loading indicator and other UI polish

* tool call grouping

web/src/components/chat/ChatMessage.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, useRef } from "react";
+import { useState, useEffect, useRef, useCallback } from "react";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import { useTranslation } from "react-i18next";
@@ -6,6 +6,7 @@ import copy from "copy-to-clipboard";
 import { toast } from "sonner";
 import { FaCopy, FaPencilAlt } from "react-icons/fa";
 import { FaArrowUpLong } from "react-icons/fa6";
+import { LuCheck } from "react-icons/lu";
 import { Button } from "@/components/ui/button";
 import { Textarea } from "@/components/ui/textarea";
 import {
@@ -50,13 +51,17 @@ export function MessageBubble({
     }
   }, [isEditing]);
 
-  const handleCopy = () => {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = useCallback(() => {
     const text = content?.trim() || "";
     if (!text) return;
     if (copy(text)) {
+      setCopied(true);
       toast.success(t("button.copiedToClipboard", { ns: "common" }));
+      setTimeout(() => setCopied(false), 2000);
     }
-  };
+  }, [content, t]);
 
   const handleEditClick = () => {
     setDraftContent(content);
@@ -93,7 +98,7 @@ export function MessageBubble({
           value={draftContent}
           onChange={(e) => setDraftContent(e.target.value)}
           onKeyDown={handleEditKeyDown}
-          className="min-h-[80px] w-full resize-y rounded-lg bg-primary px-3 py-2 text-primary-foreground placeholder:text-primary-foreground/60"
+          className="min-h-[80px] w-full resize-y rounded-2xl bg-primary px-4 py-3 text-primary-foreground placeholder:text-primary-foreground/60"
           placeholder={t("placeholder")}
           rows={3}
         />
@@ -124,44 +129,49 @@ export function MessageBubble({
   return (
     <div
       className={cn(
-        "flex flex-col gap-1",
+        "flex max-w-[85%] flex-col gap-1",
         isUser ? "items-end self-end" : "items-start self-start",
       )}
     >
       <div
         className={cn(
-          "rounded-lg px-3 py-2",
+          "rounded-2xl px-4 py-3",
           isUser ? "bg-primary text-primary-foreground" : "bg-muted",
         )}
       >
         {isUser ? (
           content
         ) : (
-          <ReactMarkdown
-            remarkPlugins={[remarkGfm]}
-            components={{
-              table: ({ node: _n, ...props }) => (
-                <table
-                  className="my-2 w-full border-collapse border border-border"
-                  {...props}
-                />
-              ),
-              th: ({ node: _n, ...props }) => (
-                <th
-                  className="border border-border bg-muted/50 px-2 py-1 text-left text-sm font-medium"
-                  {...props}
-                />
-              ),
-              td: ({ node: _n, ...props }) => (
-                <td
-                  className="border border-border px-2 py-1 text-sm"
-                  {...props}
-                />
-              ),
-            }}
-          >
-            {content}
-          </ReactMarkdown>
+          <>
+            <ReactMarkdown
+              remarkPlugins={[remarkGfm]}
+              components={{
+                table: ({ node: _n, ...props }) => (
+                  <table
+                    className="my-2 w-full border-collapse border border-border"
+                    {...props}
+                  />
+                ),
+                th: ({ node: _n, ...props }) => (
+                  <th
+                    className="border border-border bg-muted/50 px-2 py-1 text-left text-sm font-medium"
+                    {...props}
+                  />
+                ),
+                td: ({ node: _n, ...props }) => (
+                  <td
+                    className="border border-border px-2 py-1 text-sm"
+                    {...props}
+                  />
+                ),
+              }}
+            >
+              {content}
+            </ReactMarkdown>
+            {!isComplete && (
+              <span className="ml-1 inline-block h-4 w-0.5 animate-pulse bg-foreground align-middle" />
+            )}
+          </>
         )}
       </div>
       <div className="flex items-center gap-0.5">
@@ -194,7 +204,11 @@ export function MessageBubble({
                 disabled={!content?.trim()}
                 aria-label={t("button.copy", { ns: "common" })}
               >
-                <FaCopy className="size-3" />
+                {copied ? (
+                  <LuCheck className="size-3" />
+                ) : (
+                  <FaCopy className="size-3" />
+                )}
               </Button>
             </TooltipTrigger>
             <TooltipContent>

web/src/components/chat/ChatStartingState.tsx

@@ -75,7 +75,7 @@ export function ChatStartingState({ onSendMessage }: ChatStartingStateProps) {
         </div>
       </div>
 
-      <div className="flex w-full max-w-2xl flex-row items-center gap-2 rounded-xl bg-secondary p-4">
+      <div className="flex w-full max-w-2xl flex-row items-center gap-2 rounded-xl bg-secondary p-3">
         <Input
           className="h-12 w-full flex-1 border-transparent bg-transparent text-base shadow-none focus-visible:ring-0 dark:bg-transparent"
           placeholder={t("placeholder")}

web/src/components/chat/ToolCallBubble.tsx

@@ -7,7 +7,7 @@ import {
 } from "@/components/ui/collapsible";
 import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
-import { ChevronDown, ChevronRight } from "lucide-react";
+import { LuChevronDown, LuChevronRight } from "react-icons/lu";
 
 type ToolCallBubbleProps = {
   name: string;
@@ -34,7 +34,7 @@ export function ToolCallBubble({
   return (
     <div
       className={cn(
-        "rounded-lg px-3 py-2",
+        "rounded-2xl px-3 py-2",
         isLeft
           ? "self-start bg-muted"
           : "self-end bg-primary text-primary-foreground",
@@ -51,9 +51,9 @@ export function ToolCallBubble({
             )}
           >
             {open ? (
-              <ChevronDown size={12} className="shrink-0" />
+              <LuChevronDown className="size-3 shrink-0" />
             ) : (
-              <ChevronRight size={12} className="shrink-0" />
+              <LuChevronRight className="size-3 shrink-0" />
             )}
             <span className="break-words font-medium">
               {isLeft ? t("call") : t("result")} {normalizedName}

web/src/components/chat/ToolCallsGroup.tsx

@@ -0,0 +1,103 @@
+import { useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import { LuChevronsUpDown } from "react-icons/lu";
+import type { ToolCall } from "@/types/chat";
+
+type ToolCallsGroupProps = {
+  toolCalls: ToolCall[];
+};
+
+function normalizeName(name: string): string {
+  return name
+    .replace(/_/g, " ")
+    .split(" ")
+    .map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
+    .join(" ");
+}
+
+export function ToolCallsGroup({ toolCalls }: ToolCallsGroupProps) {
+  const grouped = useMemo(() => {
+    const map = new Map<string, ToolCall[]>();
+    for (const tc of toolCalls) {
+      const existing = map.get(tc.name);
+      if (existing) {
+        existing.push(tc);
+      } else {
+        map.set(tc.name, [tc]);
+      }
+    }
+    return map;
+  }, [toolCalls]);
+
+  if (toolCalls.length === 0) return null;
+
+  return (
+    <div className="flex flex-col items-start gap-2">
+      {[...grouped.entries()].map(([name, calls]) => (
+        <ToolCallRow key={name} name={name} calls={calls} />
+      ))}
+    </div>
+  );
+}
+
+type ToolCallRowProps = {
+  name: string;
+  calls: ToolCall[];
+};
+
+function ToolCallRow({ name, calls }: ToolCallRowProps) {
+  const { t } = useTranslation(["views/chat"]);
+  const [open, setOpen] = useState(false);
+  const displayName = normalizeName(name);
+  const label =
+    calls.length > 1 ? `${displayName} (\u00d7${calls.length})` : displayName;
+
+  return (
+    <Collapsible open={open} onOpenChange={setOpen}>
+      <CollapsibleTrigger className="flex items-center gap-3 rounded-xl bg-muted px-4 py-3 text-sm text-secondary-foreground transition-colors hover:bg-muted/80">
+        <span className="font-medium">{label}</span>
+        <LuChevronsUpDown className="size-4 shrink-0 text-muted-foreground" />
+      </CollapsibleTrigger>
+      <CollapsibleContent>
+        <div className="mt-1 space-y-3 rounded-xl bg-muted/40 px-4 py-3">
+          {calls.map((tc, idx) => (
+            <div
+              key={idx}
+              className={
+                calls.length > 1
+                  ? "space-y-1 border-l-2 border-border pl-3"
+                  : "space-y-1"
+              }
+            >
+              {tc.arguments && Object.keys(tc.arguments).length > 0 && (
+                <div className="text-xs">
+                  <div className="font-medium text-muted-foreground">
+                    {t("arguments")}
+                  </div>
+                  <pre className="scrollbar-container mt-1 max-h-32 overflow-auto whitespace-pre-wrap break-words rounded bg-background/50 p-2 text-[10px]">
+                    {JSON.stringify(tc.arguments, null, 2)}
+                  </pre>
+                </div>
+              )}
+              {tc.response && tc.response !== "" && (
+                <div className="text-xs">
+                  <div className="font-medium text-muted-foreground">
+                    {t("response")}
+                  </div>
+                  <pre className="scrollbar-container mt-1 max-h-32 overflow-auto whitespace-pre-wrap break-words rounded bg-background/50 p-2 text-[10px]">
+                    {tc.response}
+                  </pre>
+                </div>
+              )}
+            </div>
+          ))}
+        </div>
+      </CollapsibleContent>
+    </Collapsible>
+  );
+}