Edit LLMPopover + dependent components

raunakab · raunakab · commit 3b10dd4b22f1 · 2025-09-24T19:33:00.000-07:00
diff --git a/web/src/app/chat/components/RegenerateOption.tsx b/web/src/app/chat/components/RegenerateOption.tsx
@@ -1,45 +1,20 @@
-import { getDisplayNameForModel, LlmDescriptor } from "@/lib/hooks";
+import { LlmDescriptor } from "@/lib/hooks";
 import { parseLlmDescriptor } from "@/lib/llm/utils";
-import { useState } from "react";
-import { Hoverable } from "@/components/Hoverable";
-import { IconType } from "react-icons";
-import { FiRefreshCw } from "react-icons/fi";
 import LLMPopover from "@/app/chat/components/input/LLMPopover";
 
 export interface RegenerateOptionProps {
   regenerate: (modelOverRide: LlmDescriptor) => Promise<void>;
   overriddenModel?: string;
-  onDropdownVisibleChange: (isVisible: boolean) => void;
 }
 
 export default function RegenerateOption({
   regenerate,
   overriddenModel,
-  onDropdownVisibleChange,
 }: RegenerateOptionProps) {
-  const [isOpen, setIsOpen] = useState(false);
-  const toggleDropdownVisible = (isVisible: boolean) => {
-    setIsOpen(isVisible);
-    onDropdownVisibleChange(isVisible);
-  };
-
   return (
     <LLMPopover
       requiresImageGeneration={false}
       currentModelName={overriddenModel}
-      trigger={
-        <div onClick={() => toggleDropdownVisible(!isOpen)}>
-          {!overriddenModel ? (
-            <Hoverable size={16} icon={FiRefreshCw as IconType} />
-          ) : (
-            <Hoverable
-              size={16}
-              icon={FiRefreshCw as IconType}
-              hoverText={getDisplayNameForModel(overriddenModel)}
-            />
-          )}
-        </div>
-      }
       onSelect={(value) => {
         const { name, provider, modelName } = parseLlmDescriptor(
           value as string
@@ -50,7 +25,7 @@ export default function RegenerateOption({
           modelName: modelName,
         });
       }}
-      align="start"
+      compact
     />
   );
 }
diff --git a/web/src/app/chat/components/input/ChatInputBar.tsx b/web/src/app/chat/components/input/ChatInputBar.tsx
@@ -7,21 +7,14 @@ import React, {
 } from "react";
 import { FiPlus } from "react-icons/fi";
 import { FiLoader } from "react-icons/fi";
-import { ChatInputOption } from "@/app/chat/components/input/ChatInputOption";
 import { MinimalPersonaSnapshot } from "@/app/admin/assistants/interfaces";
 import LLMPopover from "@/app/chat/components/input/LLMPopover";
 import { InputPrompt } from "@/app/chat/interfaces";
 
 import { FilterManager, LlmManager } from "@/lib/hooks";
 import { useChatContext } from "@/components-2/context/ChatContext";
 import { ChatFileType } from "@/app/chat/interfaces";
-import {
-  DocumentIcon2,
-  FileIcon,
-  FileUploadIcon,
-  SendIcon,
-  StopGeneratingIcon,
-} from "@/components/icons/icons";
+import { DocumentIcon2, FileIcon } from "@/components/icons/icons";
 import { OnyxDocument } from "@/lib/search/interfaces";
 import { ChatState } from "@/app/chat/interfaces";
 import { useAssistantsContext } from "@/components/context/AssistantsContext";
@@ -38,7 +31,6 @@ import { DeepResearchToggle } from "@/app/chat/components/input/DeepResearchTogg
 import { ActionToggle } from "@/app/chat/components/input/ActionManagement";
 import { SelectedTool } from "@/app/chat/components/input/SelectedTool";
 import { IconButton } from "@/components-2/buttons/IconButton";
-import SvgFolderPlus from "@/icons/folder-plus";
 import SvgHourglass from "@/icons/hourglass";
 import SvgPlusCircle from "@/icons/plus-circle";
 import SvgSliders from "@/icons/sliders";
diff --git a/web/src/app/chat/components/input/LLMPopover.tsx b/web/src/app/chat/components/input/LLMPopover.tsx
@@ -21,21 +21,23 @@ import { FiAlertTriangle } from "react-icons/fi";
 import { Slider } from "@/components/ui/slider";
 import { useUser } from "@/components/user/UserProvider";
 import { TruncatedText } from "@/components/ui/truncatedText";
-import { ChatInputOption } from "@/app/chat/components/input/ChatInputOption";
 import { useAgentsContext } from "@/components-2/context/AgentsContext";
 import { useChatContext } from "@/components-2/context/ChatContext";
+import { SelectButton } from "@/components-2/buttons/SelectButton";
+import SvgRefreshCw from "@/icons/refresh-cw";
+import { IconButton } from "@/components-2/buttons/IconButton";
 
 export interface LLMPopoverProps {
+  compact?: boolean;
   requiresImageGeneration?: boolean;
-  trigger?: React.ReactElement;
   onSelect?: (value: string) => void;
   currentModelName?: string;
   align?: "start" | "center" | "end";
 }
 
 export default function LLMPopover({
+  compact,
   requiresImageGeneration,
-  trigger,
   onSelect,
   currentModelName,
   align,
@@ -48,7 +50,7 @@ export default function LLMPopover({
     currentChat || undefined,
     currentAgent || undefined
   );
-  const [isOpen, setIsOpen] = useState(false);
+  const [open, setOpen] = useState(false);
 
   const [localTemperature, setLocalTemperature] = useState(
     llmManager.temperature ?? 0.5
@@ -78,24 +80,21 @@ export default function LLMPopover({
 
   // Memoize trigger content to prevent rerendering
   const triggerContent = useMemo(
-    trigger
-      ? () => trigger
-      : () => (
-          <button data-testid="llm-popover-trigger">
-            <ChatInputOption
-              minimize
-              toggle
-              flexPriority="stiff"
-              name={getDisplayNameForModel(llmManager.currentLlm.modelName)}
-              Icon={getProviderIcon(
-                llmManager.currentLlm.provider,
-                llmManager.currentLlm.modelName
-              )}
-              tooltipContent="Switch models"
-            />
-          </button>
-        ),
-    [llmManager.currentLlm]
+    () =>
+      compact ? (
+        <IconButton icon={SvgRefreshCw} tertiary active={open} />
+      ) : (
+        <SelectButton
+          icon={getProviderIcon(
+            llmManager.currentLlm.provider,
+            llmManager.currentLlm.modelName
+          )}
+          active={open}
+        >
+          {getDisplayNameForModel(llmManager.currentLlm.modelName)}
+        </SelectButton>
+      ),
+    [llmManager.currentLlm, open]
   );
 
   const llmOptionsToChooseFrom = useMemo(
@@ -121,16 +120,13 @@ export default function LLMPopover({
   );
 
   return (
-    <Popover open={isOpen} onOpenChange={setIsOpen}>
-      <PopoverTrigger
-        asChild
-        className="hover:bg-background-tint-03 rounded-08"
-      >
-        {triggerContent}
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <div>{triggerContent}</div>
       </PopoverTrigger>
       <PopoverContent
         side="top"
-        align={align || "end"}
+        align="center"
         className="w-64 p-1 bg-background-tint-01 border shadow-lg flex flex-col"
       >
         <div className="flex-grow max-h-[300px] default-scrollbar overflow-y-auto">
@@ -151,7 +147,7 @@ export default function LLMPopover({
                         name,
                       } as LlmDescriptor);
                       onSelect?.(structureValue(name, provider, modelName));
-                      setIsOpen(false);
+                      setOpen(false);
                     }}
                   >
                     {icon({
diff --git a/web/src/components-2/buttons/SelectButton.tsx b/web/src/components-2/buttons/SelectButton.tsx
@@ -1,24 +1,17 @@
 "use client";
 
-import React, { useState } from "react";
+import React from "react";
 import { SvgProps } from "@/icons";
-import SvgArrowUp from "@/icons/arrow-up";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
 import Truncated from "@/components-2/Truncated";
 import SvgChevronDownSmall from "@/icons/chevron-down-small";
 
-const textClasses = (active: boolean | undefined) =>
-  ({
-    primary: {
-      main: ["text-text-04", "stroke-text-04"],
-      disabled: ["text-text-02", "stroke-text-02"],
-    },
-  }) as const;
+const textClasses = {
+  primary: {
+    main: ["text-text-04", "stroke-text-04"],
+    disabled: ["text-text-02", "stroke-text-02"],
+  },
+} as const;
 
 export interface SelectButtonProps {
   // Button states:
@@ -54,38 +47,40 @@ export function SelectButton({
   return (
     <button
       className={cn(
-        "flex flex-row justify-center items-center p-spacing-interline gap-spacing-inline rounded-08 hover:bg-background-tint-02 h-[2rem]",
+        "flex flex-row justify-center items-center p-spacing-interline gap-spacing-inline hover:bg-background-tint-02 rounded-08 h-[2rem] max-w-[10rem] w-full overflow-hidden",
         folded ? "w-min" : "w-full",
         active ? "bg-background-tint-00" : "bg-transparent",
         disabled && "opacity-50 cursor-not-allowed",
         className
       )}
       onClick={disabled ? undefined : onClick}
     >
-      <Icon className={cn(textClasses(active)[variant][state])} />
-      <div className="flex flex-row justify-center items-center">
-        {!folded &&
-          (typeof children === "string" ? (
+      <div className="w-[1rem] h-[1rem] flex flex-col justify-center items-center">
+        <Icon className={cn("w-full h-full", textClasses[variant][state])} />
+      </div>
+      {!folded && (
+        <div className="flex flex-row justify-center items-center">
+          {typeof children === "string" ? (
             <Truncated
               side="right"
               offset={40}
-              className={cn("text-left", textClasses(active)[variant][state])}
+              className={cn("text-left", textClasses[variant][state])}
               mainAction
-              disable
             >
               {children}
             </Truncated>
           ) : (
             children
-          ))}
-        <SvgChevronDownSmall
-          className={cn(
-            "h-[1.5rem] w-[1.5rem] transition-transform duration-200 ease-in-out",
-            textClasses(active)[variant][state],
-            active && "-rotate-180"
           )}
-        />
-      </div>
+          <SvgChevronDownSmall
+            className={cn(
+              "h-[1.5rem] w-[1.5rem] transition-transform duration-200",
+              textClasses[variant][state],
+              active && "-rotate-180"
+            )}
+          />
+        </div>
+      )}
     </button>
   );
 }
diff --git a/web/src/icons/refresh-cw.tsx b/web/src/icons/refresh-cw.tsx
@@ -0,0 +1,18 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+const SvgRefreshCw = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M14.448 3.10983V6.77746M14.448 6.77746H10.7803M14.448 6.77746L11.6117 4.11231C10.9547 3.45502 10.142 2.97486 9.24923 2.71664C8.35651 2.45842 7.41292 2.43055 6.50651 2.63564C5.6001 2.84072 4.76042 3.27208 4.06581 3.88945C3.3712 4.50683 2.84431 5.2901 2.53429 6.16618M1 12.8902V9.22254M1 9.22254H4.66763M1 9.22254L3.8363 11.8877C4.49326 12.545 5.30603 13.0251 6.19875 13.2834C7.09147 13.5416 8.03506 13.5694 8.94147 13.3644C9.84787 13.1593 10.6876 12.7279 11.3822 12.1105C12.0768 11.4932 12.6037 10.7099 12.9137 9.83381"
+      strokeWidth={1.5}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+export default SvgRefreshCw;
