Agent Mode UI Tweaks

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

@@ -98,38 +98,38 @@ export function BlockSettingsTopToolbar(props: BlockSettingsTopToolbarProps) {
   };
 
   return (
-    <div className="flex w-full items-center justify-between">
-      <div className="xs:flex hidden items-center justify-center text-gray-400">
-        <BlockSettingsToolbarIcon
-          icon={isExpanded ? ChevronLeftIcon : EllipsisHorizontalIcon}
-          tooltip={isExpanded ? "Collapse sections" : "Expand sections"}
-          isSelected={false}
-          onClick={handleEllipsisClick}
-        />
-        <div
-          className="flex overflow-hidden transition-all duration-200"
-          style={{ width: isExpanded ? `160px` : "0px" }}
-        >
-          <div className="flex">
-            {sections.map((section) => (
-              <BlockSettingsToolbarIcon
-                key={section.id}
-                icon={section.icon}
-                tooltip={section.tooltip}
-                isSelected={props.selectedSection === section.id}
-                onClick={() =>
-                  props.setSelectedSection(
-                    props.selectedSection === section.id ? null : section.id,
-                  )
-                }
-              />
-            ))}
+    <div className="flex items-center justify-between">
+      <div>
+        <div className="xs:flex hidden items-center justify-center text-gray-400">
+          <BlockSettingsToolbarIcon
+            icon={isExpanded ? ChevronLeftIcon : EllipsisHorizontalIcon}
+            tooltip={isExpanded ? "Collapse sections" : "Expand sections"}
+            isSelected={false}
+            onClick={handleEllipsisClick}
+          />
+          <div
+            className="flex overflow-hidden transition-all duration-200"
+            style={{ width: isExpanded ? `160px` : "0px" }}
+          >
+            <div className="flex">
+              {sections.map((section) => (
+                <BlockSettingsToolbarIcon
+                  key={section.id}
+                  icon={section.icon}
+                  tooltip={section.tooltip}
+                  isSelected={props.selectedSection === section.id}
+                  onClick={() =>
+                    props.setSelectedSection(
+                      props.selectedSection === section.id ? null : section.id,
+                    )
+                  }
+                />
+              ))}
+            </div>
           </div>
         </div>
       </div>
-      <div className="ml-auto">
-        <AssistantSelect />
-      </div>
+      <AssistantSelect />
     </div>
   );
 }

gui/src/components/modelSelection/platform/AssistantSelect.tsx

@@ -5,19 +5,24 @@ import { useContext, useEffect, useRef } from "react";
 import { useAuth } from "../../../context/Auth";
 import { IdeMessengerContext } from "../../../context/IdeMessenger";
 import { cycleProfile } from "../../../redux";
-import { useAppDispatch } from "../../../redux/hooks";
+import { useAppDispatch, useAppSelector } from "../../../redux/hooks";
 import { fontSize, isMetaEquivalentKeyPressed } from "../../../util";
 import PopoverTransition from "../../mainInput/InputToolbar/bottom/PopoverTransition";
 import AssistantIcon from "./AssistantIcon";
 import { AssistantSelectOptions } from "./AssistantSelectOptions";
 
 function AssistantSelectButton(props: { selectedProfile: ProfileDescription }) {
+  const isLumpToolbarExpanded = useAppSelector(
+    (state) => state.ui.isBlockSettingsToolbarExpanded,
+  );
   return (
     <div className="flex max-w-[50vw] items-center gap-0.5">
       <div className="mr-1 h-3 w-3 flex-shrink-0 select-none">
-        <AssistantIcon size={3} assistant={props.selectedProfile} />
+        <AssistantIcon assistant={props.selectedProfile} />
       </div>
-      <span className="select-none truncate">
+      <span
+        className={`select-none truncate ${isLumpToolbarExpanded ? "xs:hidden sm:block" : ""}`}
+      >
         {props.selectedProfile.title}
       </span>
       <ChevronDownIcon
@@ -68,7 +73,7 @@ export default function AssistantSelect() {
             orgSlug: selectedOrganization?.slug,
           });
         }}
-        className="hover:bg flex cursor-pointer select-none items-center gap-1 whitespace-nowrap text-gray-400"
+        className="flex cursor-pointer select-none items-center gap-1 whitespace-nowrap text-gray-400"
         style={{ fontSize: fontSize(-3) }}
       >
         <PlusIcon className="h-3 w-3 select-none" /> Create your first assistant
@@ -89,7 +94,12 @@ export default function AssistantSelect() {
         </Popover.Button>
 
         <PopoverTransition>
-          <Popover.Panel className="bg-vsc-input-background absolute right-0 top-full z-[1000] mr-1 mt-1 flex min-w-[200px] max-w-[90vw] cursor-default flex-row overflow-hidden rounded-md border-2 border-zinc-600 p-0">
+          <Popover.Panel
+            className="bg-vsc-input-background absolute right-0 z-[1000] mr-1 mt-1 flex min-w-[200px] max-w-[90vw] cursor-default flex-row overflow-hidden rounded-md border-2 border-zinc-600 p-0"
+            style={{
+              bottom: "100%",
+            }}
+          >
             <AssistantSelectOptions
               onClose={() => {
                 if (buttonRef.current) {

gui/src/components/modelSelection/platform/AssistantSelectOptions.tsx

@@ -48,7 +48,7 @@ export function AssistantSelectOptions({
   }
 
   return (
-    <div className="border-lightgray flex w-full flex-col overflow-x-hidden pt-0">
+    <div className="border-lightgray flex flex-col">
       <div className={`max-h-[300px] w-full`}>
         {profiles.map((profile, idx) => {
           return (
@@ -68,13 +68,13 @@ export function AssistantSelectOptions({
                 onClose();
               }}
             >
-              <div className="flex w-full items-center">
-                <div className="mr-2 h-4 w-4 flex-shrink-0">
+              <div className="flex flex-row items-center gap-2">
+                <div className="h-3 w-3 sm:h-4 sm:w-4">
                   <AssistantIcon assistant={profile} />
                 </div>
                 <span
-                  className="flex-1 truncate"
-                  style={{ fontSize: getFontSize() - 2 }}
+                  className="lines lines-1 flex-1 text-xs"
+                  style={{ fontSize: getFontSize() - 5 }}
                 >
                   {profile.title}
                 </span>
@@ -90,10 +90,10 @@ export function AssistantSelectOptions({
           onClick={session ? onNewAssistant : () => login(false)}
         >
           <div
-            className="flex items-center py-0.5"
+            className="flex items-center gap-2 py-0.5"
             style={{ fontSize: getFontSize() - 2 }}
           >
-            <PlusIcon className="mr-2 h-4 w-4 flex-shrink-0" />
+            <PlusIcon className="h-3 w-3 flex-shrink-0 sm:h-4 sm:w-4" />
             New Assistant
           </div>
         </OptionDiv>

gui/src/pages/config/KeyboardShortcuts.tsx

@@ -1,3 +1,4 @@
+import { useMemo } from "react";
 import styled from "styled-components";
 import {
   defaultBorderRadius,
@@ -7,16 +8,6 @@ import {
 import { ToolTip } from "../../components/gui/Tooltip";
 import { getPlatform, isJetBrains } from "../../util";
 
-const GridDiv = styled.div`
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-  grid-gap: 1rem;
-  padding: 1rem 0;
-  justify-items: center;
-  align-items: center;
-  overflow-x: hidden;
-`;
-
 const StyledKeyDiv = styled.div`
   border: 0.5px solid ${lightGray};
   border-radius: ${defaultBorderRadius};
@@ -64,9 +55,9 @@ interface KeyboardShortcutProps {
 function KeyboardShortcut(props: KeyboardShortcutProps) {
   const shortcut = getPlatform() === "mac" ? props.mac : props.windows;
   return (
-    <div className="flex w-full items-center justify-between gap-x-4">
-      <span className="text-xs">{props.description}</span>
-      <div className="float-right flex gap-2">
+    <div className="flex w-full flex-wrap items-center justify-between gap-x-4 gap-y-1">
+      <span className="max-w-60 text-xs">{props.description}:</span>
+      <div className="flex flex-1 flex-row items-center justify-end gap-1.5">
         {shortcut.split(" ").map((key, i) => {
           return <KeyDiv key={i} text={key}></KeyDiv>;
         })}
@@ -201,23 +192,25 @@ const jetbrainsShortcuts: KeyboardShortcutProps[] = [
 ];
 
 function KeyboardShortcuts() {
+  const shortcuts = useMemo(() => {
+    return isJetBrains() ? jetbrainsShortcuts : vscodeShortcuts;
+  }, []);
+
   return (
-    <div>
+    <div className="flex max-w-[400px] flex-col">
       <h3 className="mx-auto mb-1 text-xl">Keyboard shortcuts</h3>
-      <GridDiv>
-        {(isJetBrains() ? jetbrainsShortcuts : vscodeShortcuts).map(
-          (shortcut, i) => {
-            return (
-              <KeyboardShortcut
-                key={i}
-                mac={shortcut.mac}
-                windows={shortcut.windows}
-                description={shortcut.description}
-              />
-            );
-          },
-        )}
-      </GridDiv>
+      <div className="flex flex-col items-center justify-center gap-x-3 gap-y-3 p-1">
+        {shortcuts.map((shortcut, i) => {
+          return (
+            <KeyboardShortcut
+              key={i}
+              mac={shortcut.mac}
+              windows={shortcut.windows}
+              description={shortcut.description}
+            />
+          );
+        })}
+      </div>
     </div>
   );
 }

gui/src/pages/config/index.tsx

@@ -32,30 +32,32 @@ function ConfigPage() {
       id: "settings",
       label: "Settings",
       component: <UserSettingsForm />,
-      icon: <Cog6ToothIcon className="h-4 w-4 flex-shrink-0" />,
+      icon: <Cog6ToothIcon className="xs:h-4 xs:w-4 h-3 w-3 flex-shrink-0" />,
     },
     {
       id: "indexing",
       label: "Indexing",
       component: <IndexingSettingsSection />,
-      icon: <CircleStackIcon className="h-4 w-4 flex-shrink-0" />,
+      icon: <CircleStackIcon className="xs:h-4 xs:w-4 h-3 w-3 flex-shrink-0" />,
     },
     {
       id: "help",
       label: "Help",
       component: <HelpCenterSection />,
-      icon: <QuestionMarkCircleIcon className="h-4 w-4 flex-shrink-0" />,
+      icon: (
+        <QuestionMarkCircleIcon className="xs:h-4 xs:w-4 h-3 w-3 flex-shrink-0" />
+      ),
     },
     {
       id: "shortcuts",
       label: "Shortcuts",
       component: <KeyboardShortcuts />,
-      icon: <AcademicCapIcon className="h-4 w-4 flex-shrink-0" />,
+      icon: <AcademicCapIcon className="xs:h-4 xs:w-4 h-3 w-3 flex-shrink-0" />,
     },
   ];
 
   return (
-    <div className="flex h-full flex-col">
+    <div className="flex h-full flex-col overflow-y-auto">
       <div className="bg-vsc-background sticky top-0 z-10">
         <PageHeader
           showBorder
@@ -65,14 +67,14 @@ function ConfigPage() {
         />
 
         {/* Tab Headers */}
-        <div className="grid w-full grid-cols-2 border-0 border-b-[1px] border-solid border-b-zinc-700 sm:flex sm:justify-center">
+        <div className="grid grid-cols-2 border-0 border-b-[1px] border-solid border-b-zinc-700 p-0.5 sm:flex sm:justify-center md:gap-x-2">
           {tabs.map((tab) => (
             <div
               style={{
                 fontSize: fontSize(-2),
               }}
               key={tab.id}
-              className={`hover:bg-vsc-input-background flex cursor-pointer items-center justify-center gap-2 rounded-md px-4 py-2 ${
+              className={`hover:bg-vsc-input-background flex cursor-pointer items-center justify-center gap-1.5 rounded-md px-2 py-2 ${
                 activeTab === tab.id ? "" : "text-gray-400"
               }`}
               onClick={() => setActiveTab(tab.id)}
@@ -85,7 +87,7 @@ function ConfigPage() {
       </div>
 
       {/* Tab Content */}
-      <div className="flex-1 overflow-y-auto overflow-x-hidden px-4">
+      <div className="flex-1 overflow-y-auto px-4">
         {tabs.find((tab) => tab.id === activeTab)?.component}
       </div>
     </div>

gui/src/pages/gui/Chat.tsx

@@ -292,7 +292,7 @@ export function Chat() {
 
       <StepsDiv
         ref={stepsDivRef}
-        className={`overflow-y-scroll ${showPageHeader ? "" : "pt-[8px]"} ${showScrollbar ? "thin-scrollbar" : "no-scrollbar"} ${history.length > 0 ? "flex-1" : ""}`}
+        className={`mt-[2px] overflow-y-scroll ${showPageHeader ? "" : "pt-[8px]"} ${showScrollbar ? "thin-scrollbar" : "no-scrollbar"} ${history.length > 0 ? "flex-1" : ""}`}
       >
         {highlights}
         {history.map((item, index: number) => (