Merge pull request #4939 from continuedev/dallin/assistant-select

Assistant select and Notch UI tweaks

Author: RomneyDa

gui/src/components/mainInput/ContinueInputBox.tsx

@@ -1,6 +1,6 @@
 import { Editor, JSONContent } from "@tiptap/react";
 import { ContextItemWithId, InputModifiers } from "core";
-import { useMemo, useState } from "react";
+import { useMemo } from "react";
 import styled, { keyframes } from "styled-components";
 import { defaultBorderRadius, vscBackground } from "..";
 import { useAppSelector } from "../../redux/hooks";
@@ -113,12 +113,10 @@ function ContinueInputBox(props: ContinueInputBoxProps) {
       }
     : {};
 
-  const [lumpOpen, setLumpOpen] = useState(true);
-
   return (
     <div className={`${props.hidden ? "hidden" : ""}`}>
       <div className={`relative flex flex-col px-2`}>
-        {props.isMainInput && <Lump open={lumpOpen} setOpen={setLumpOpen} />}
+        {props.isMainInput && <Lump />}
         <GradientBorder
           loading={isStreaming && props.isLastUserInput ? 1 : 0}
           borderColor={
@@ -135,8 +133,6 @@ function ContinueInputBox(props: ContinueInputBoxProps) {
             availableSlashCommands={filteredSlashCommands}
             historyKey={historyKey}
             toolbarOptions={toolbarOptions}
-            lumpOpen={lumpOpen}
-            setLumpOpen={setLumpOpen}
             inputId={props.inputId}
           />
         </GradientBorder>

gui/src/components/mainInput/InputToolbar.tsx

@@ -31,7 +31,7 @@ import { ToolTip } from "../gui/Tooltip";
 import ModelSelect from "../modelSelection/ModelSelect";
 import ModeSelect from "../modelSelection/ModeSelect";
 import { useFontSize } from "../ui/font";
-import HoverItem from "./InputToolbar/bottom/HoverItem";
+import HoverItem from "./InputToolbar/HoverItem";
 
 const StyledDiv = styled.div<{ isHidden?: boolean }>`
   padding-top: 4px;
@@ -87,8 +87,6 @@ interface InputToolbarProps {
   toolbarOptions?: ToolbarOptions;
   disabled?: boolean;
   isMainInput?: boolean;
-  lumpOpen: boolean;
-  setLumpOpen: (open: boolean) => void;
 }
 
 function InputToolbar(props: InputToolbarProps) {

gui/src/components/mainInput/InputToolbar/bottom/HoverItem.tsx renamed to gui/src/components/mainInput/InputToolbar/HoverItem.tsx

@@ -2,10 +2,10 @@ import { InformationCircleIcon } from "@heroicons/react/24/outline";
 import { Tool } from "core";
 import { useEffect } from "react";
 import { useDispatch } from "react-redux";
-import { useAppSelector } from "../../../../redux/hooks";
-import { addTool, toggleToolSetting } from "../../../../redux/slices/uiSlice";
-import { fontSize } from "../../../../util";
-import { ToolTip } from "../../../gui/Tooltip";
+import { useAppSelector } from "../../../redux/hooks";
+import { addTool, toggleToolSetting } from "../../../redux/slices/uiSlice";
+import { fontSize } from "../../../util";
+import { ToolTip } from "../../gui/Tooltip";
 
 interface ToolDropdownItemProps {
   tool: Tool;

gui/src/components/mainInput/InputToolbar/bottom/ToolDropdownItem.tsx renamed to gui/src/components/mainInput/InputToolbar/ToolDropdownItem.tsx

@@ -1,9 +1,9 @@
 import { Tool } from "core";
 import { useMemo } from "react";
-import { useAppDispatch, useAppSelector } from "../../../../redux/hooks";
-import { toggleToolGroupSetting } from "../../../../redux/slices/uiSlice";
-import { fontSize } from "../../../../util";
-import ToggleSwitch from "../../../gui/Switch";
+import { useAppDispatch, useAppSelector } from "../../../redux/hooks";
+import { toggleToolGroupSetting } from "../../../redux/slices/uiSlice";
+import { fontSize } from "../../../util";
+import ToggleSwitch from "../../gui/Switch";
 import ToolDropdownItem from "./ToolDropdownItem";
 
 export const ToolPermissionsDialog = () => {

gui/src/components/mainInput/InputToolbar/bottom/ToolPermissionsDialog.tsx renamed to gui/src/components/mainInput/InputToolbar/ToolPermissionsDialog.tsx

@@ -13,7 +13,7 @@ import { useAppDispatch, useAppSelector } from "../../../redux/hooks";
 import { toggleBlockSettingsToolbar } from "../../../redux/slices/uiSlice";
 import { fontSize } from "../../../util";
 import AssistantSelect from "../../modelSelection/platform/AssistantSelect";
-import HoverItem from "../InputToolbar/bottom/HoverItem";
+import HoverItem from "../InputToolbar/HoverItem";
 
 interface BlockSettingsToolbarIcon {
   tooltip: string;
@@ -129,7 +129,7 @@ export function BlockSettingsTopToolbar(props: BlockSettingsTopToolbarProps) {
           </div>
         </div>
       </div>
-      <div className="ml-auto">
+      <div>
         <AssistantSelect />
       </div>
     </div>

gui/src/components/mainInput/InputToolbar/top/TopInputToolbar.tsx

@@ -9,12 +9,7 @@ import { useAppSelector } from "../../../redux/hooks";
 import { LumpToolbar } from "./LumpToolbar";
 import { SelectedSection } from "./sections/SelectedSection";
 
-interface LumpProps {
-  open: boolean;
-  setOpen: (open: boolean) => void;
-}
-
-const LumpDiv = styled.div<{ open: boolean }>`
+const LumpDiv = styled.div`
   background-color: ${vscInputBackground};
   margin-left: 4px;
   margin-right: 4px;
@@ -35,33 +30,50 @@ const ContentDiv = styled.div<{ hasSection: boolean; isVisible: boolean }>`
   overflow-y: auto;
 `;
 
-export function Lump(props: LumpProps) {
-  const { open, setOpen } = props;
+export function Lump() {
   const [selectedSection, setSelectedSection] = useState<string | null>(null);
   const [displayedSection, setDisplayedSection] = useState<string | null>(null);
   const [isVisible, setIsVisible] = useState(false);
   const isStreaming = useAppSelector((state) => state.session.isStreaming);
 
+  useEffect(() => {
+    if (!selectedSection) {
+      return;
+    }
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") {
+        setSelectedSection(null);
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [selectedSection]);
+
+  useEffect(() => {
+    if (isStreaming) {
+      setSelectedSection(null);
+    }
+  }, [isStreaming]);
+
   useEffect(() => {
     if (selectedSection) {
       setDisplayedSection(selectedSection);
       setIsVisible(true);
     } else {
       setIsVisible(false);
-      // Delay clearing the displayed section until after the fade-out
       const timeout = setTimeout(() => {
         setDisplayedSection(null);
-      }, 300); // Match the transition duration
-      return () => clearTimeout(timeout);
+      }, 300);
+      return () => {
+        clearTimeout(timeout);
+      };
     }
   }, [selectedSection]);
 
-  if (!open) {
-    return null;
-  }
-
   return (
-    <LumpDiv open={open}>
+    <LumpDiv>
       <div className="mt-0.5 px-2">
         <LumpToolbar
           selectedSection={selectedSection}
@@ -73,9 +85,7 @@ export function Lump(props: LumpProps) {
           hasSection={!!selectedSection}
           isVisible={isVisible}
         >
-          {!isStreaming && (
-            <SelectedSection selectedSection={displayedSection} />
-          )}
+          <SelectedSection selectedSection={displayedSection} />
         </ContentDiv>
       </div>
     </LumpDiv>

gui/src/components/mainInput/Lump/BlockSettingsTopToolbar.tsx

@@ -1,4 +1,4 @@
-import { ToolPermissionsDialog } from "../../InputToolbar/bottom/ToolPermissionsDialog";
+import { ToolPermissionsDialog } from "../../InputToolbar/ToolPermissionsDialog";
 
 interface ToolsSectionProps {}
 

gui/src/components/mainInput/Lump/index.tsx

@@ -32,8 +32,6 @@ export interface TipTapEditorProps {
   ) => void;
   editorState?: JSONContent;
   toolbarOptions?: ToolbarOptions;
-  lumpOpen: boolean;
-  setLumpOpen: (open: boolean) => void;
   placeholder?: string;
   historyKey: string;
   inputId: string;
@@ -262,8 +260,6 @@ function TipTapEditor(props: TipTapEditorProps) {
           activeKey={activeKey}
           hidden={shouldHideToolbar && !props.isMainInput}
           onAddContextItem={() => insertCharacterWithWhitespace("@")}
-          lumpOpen={props.lumpOpen}
-          setLumpOpen={props.setLumpOpen}
           onEnter={onEnterRef.current}
           onImageFileSelected={(file) => {
             handleImageFile(ideMessenger, file).then((result) => {

gui/src/components/mainInput/Lump/sections/ToolsSection.tsx

@@ -1,12 +1,13 @@
 import {
   ArrowTopRightOnSquareIcon,
   BuildingOfficeIcon,
+  CheckIcon,
   ChevronDownIcon,
   Cog6ToothIcon,
   ExclamationTriangleIcon,
   PlusIcon,
 } from "@heroicons/react/24/outline";
-import { useContext, useEffect, useMemo, useRef, useState } from "react";
+import { useContext, useEffect, useMemo, useRef } from "react";
 import { useAuth } from "../../../context/Auth";
 import { IdeMessengerContext } from "../../../context/IdeMessenger";
 import { cycleProfile, selectProfileThunk } from "../../../redux";
@@ -35,14 +36,16 @@ import AssistantIcon from "./AssistantIcon";
 
 interface AssistantSelectOptionProps {
   profile: ProfileDescription;
+  selected: boolean;
   onClick: () => void;
 }
+
 const AssistantSelectOption = ({
   profile,
+  selected,
   onClick,
 }: AssistantSelectOptionProps) => {
   const navigate = useNavigate();
-  const [hovered, setHovered] = useState(false);
 
   const hasFatalErrors = useMemo(() => {
     return !!profile.errors?.find((error) => error.fatal);
@@ -72,29 +75,29 @@ const AssistantSelectOption = ({
 
   return (
     <ListboxOption
-      onMouseEnter={() => setHovered(true)}
-      onMouseLeave={() => setHovered(false)}
       value={profile.id}
       disabled={hasFatalErrors}
       onClick={!hasFatalErrors ? handleOptionClick : undefined}
       fontSizeModifier={-2}
     >
       <div className="flex w-full flex-col gap-0.5">
         <div className="flex w-full items-center justify-between">
-          <div className="flex w-full items-center">
+          <div className="flex w-full items-center gap-2">
             <div className="mr-2 h-4 w-4 flex-shrink-0">
               <AssistantIcon assistant={profile} />
             </div>
-            <span className="line-clamp-1 flex-1">{profile.title}</span>
+            <span
+              className={`line-clamp-1 flex-1 ${selected ? "font-bold" : ""}`}
+            >
+              {profile.title}
+            </span>
           </div>
-          <div className="ml-2 flex items-center">
+          <div className="flex flex-row items-center gap-2">
+            <div>{selected ? <CheckIcon className="h-3 w-3" /> : null}</div>
             {!profile.errors?.length ? (
               isLocalProfile(profile) ? (
                 <Cog6ToothIcon
                   className="h-3 w-3 flex-shrink-0 cursor-pointer"
-                  style={{
-                    opacity: hovered ? 1 : 0,
-                  }}
                   onClick={(e) => {
                     e.stopPropagation();
                     e.preventDefault();
@@ -103,9 +106,6 @@ const AssistantSelectOption = ({
                 />
               ) : (
                 <ArrowTopRightOnSquareIcon
-                  style={{
-                    opacity: hovered ? 1 : 0,
-                  }}
                   className="h-3 w-3 flex-shrink-0 cursor-pointer"
                   onClick={(e) => {
                     e.stopPropagation();
@@ -215,7 +215,7 @@ export default function AssistantSelect() {
 
   return (
     <Listbox>
-      <div className="sm:max-w-4/5 relative flex">
+      <div className="relative">
         <ListboxButton
           data-testid="assistant-select-button"
           ref={buttonRef}
@@ -249,6 +249,7 @@ export default function AssistantSelect() {
                     key={idx}
                     profile={profile}
                     onClick={close}
+                    selected={profile.id === selectedProfile.id}
                   />
                 );
               })}

gui/src/components/mainInput/tiptap/TipTapEditor.tsx

@@ -46,7 +46,7 @@ const ListboxOptions = React.forwardRef<HTMLUListElement, ListboxOptionsProps>(
         anchor={"bottom start"}
         {...props}
         className={cn(
-          "bg-vsc-input-background flex flex-col overflow-auto px-0 shadow-md",
+          "bg-vsc-input-background flex w-max min-w-[160px] max-w-[400px] flex-col overflow-auto px-0 shadow-md",
           props.className,
         )}
         style={{