@@ -165,7 +151,7 @@ function InputToolbar(props: InputToolbarProps) {
{!props.toolbarOptions?.hideUseCodebase && !isInEditMode && (
@@ -235,7 +221,7 @@ function InputToolbar(props: InputToolbarProps) {
⏎
-
+
);
}
diff --git a/gui/src/components/mainInput/InputToolbar/bottom/PopoverTransition.tsx b/gui/src/components/mainInput/InputToolbar/bottom/PopoverTransition.tsx
deleted file mode 100644
index 24b64c27ba..0000000000
--- a/gui/src/components/mainInput/InputToolbar/bottom/PopoverTransition.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import { Transition } from "@headlessui/react";
-
-export default function PopoverTransition({
- children,
- show,
- afterLeave,
-}: {
- children: React.ReactNode;
- show?: boolean;
- afterLeave?: () => void;
-}) {
- return (
-
- {children}
-
- );
-}
diff --git a/gui/src/components/mainInput/InputToolbar/bottom/ToolDropdownItem.tsx b/gui/src/components/mainInput/InputToolbar/bottom/ToolDropdownItem.tsx
index ca423764b8..7c838adf32 100644
--- a/gui/src/components/mainInput/InputToolbar/bottom/ToolDropdownItem.tsx
+++ b/gui/src/components/mainInput/InputToolbar/bottom/ToolDropdownItem.tsx
@@ -66,7 +66,7 @@ function ToolDropdownItem(props: ToolDropdownItemProps) {
) : null}
-
+
{props.tool.faviconUrl && (
-
+
{!isStreaming && (
)}
diff --git a/gui/src/components/mainInput/Lump/sections/docs/DocsDetailsDialog.tsx b/gui/src/components/mainInput/Lump/sections/docs/DocsDetailsDialog.tsx
index df07aafee8..3c91946b35 100644
--- a/gui/src/components/mainInput/Lump/sections/docs/DocsDetailsDialog.tsx
+++ b/gui/src/components/mainInput/Lump/sections/docs/DocsDetailsDialog.tsx
@@ -99,7 +99,7 @@ function DocsDetailsDialog({ startUrl }: DocsDetailsDialogProps) {
data-tooltip-id={contentToolTipId}
data-tooltip-delay-show={500}
>
-
+
{chunk.content}
diff --git a/gui/src/components/mainInput/Lump/sections/docs/DocsIndexingStatus.tsx b/gui/src/components/mainInput/Lump/sections/docs/DocsIndexingStatus.tsx
index 40b8c39cd4..6a4215c2ec 100644
--- a/gui/src/components/mainInput/Lump/sections/docs/DocsIndexingStatus.tsx
+++ b/gui/src/components/mainInput/Lump/sections/docs/DocsIndexingStatus.tsx
@@ -135,7 +135,7 @@ function DocsIndexingStatus({
style={{
fontSize: fontSize(-3),
}}
- className={`lines lines-1 m-0 p-0 text-left ${status?.url ? "cursor-pointer hover:underline" : ""}`}
+ className={`m-0 line-clamp-1 p-0 text-left ${status?.url ? "cursor-pointer hover:underline" : ""}`}
>
{docConfig.title ?? docConfig.startUrl}
diff --git a/gui/src/components/mainInput/tiptap/TipTapEditor.tsx b/gui/src/components/mainInput/tiptap/TipTapEditor.tsx
index 722cb007c9..cef58128e5 100644
--- a/gui/src/components/mainInput/tiptap/TipTapEditor.tsx
+++ b/gui/src/components/mainInput/tiptap/TipTapEditor.tsx
@@ -75,6 +75,9 @@ function TipTapEditor(props: TipTapEditorProps) {
}, [editor, props.placeholder, historyLength]);
useEffect(() => {
+ if (isInEditMode) {
+ setShouldHideToolbar(false);
+ }
if (props.isMainInput) {
editor?.commands.clearContent(true);
}
@@ -155,14 +158,19 @@ function TipTapEditor(props: TipTapEditorProps) {
const handleBlur = (e: React.FocusEvent) => {
// Check if the new focus target is within our InputBoxDiv
- const currentTarget = e.currentTarget;
- const relatedTarget = e.relatedTarget as Node | null;
+ queueMicrotask(() => {
+ if (isInEditMode) {
+ return;
+ }
+ const currentTarget = e.currentTarget;
+ const relatedTarget = e.relatedTarget as Node | null;
- if (relatedTarget && currentTarget.contains(relatedTarget)) {
- return;
- }
+ if (relatedTarget && currentTarget.contains(relatedTarget)) {
+ return;
+ }
- setShouldHideToolbar(true);
+ setShouldHideToolbar(true);
+ });
};
return (
diff --git a/gui/src/components/modelSelection/ModeSelect.tsx b/gui/src/components/modelSelection/ModeSelect.tsx
index efb670ae68..622c56838e 100644
--- a/gui/src/components/modelSelection/ModeSelect.tsx
+++ b/gui/src/components/modelSelection/ModeSelect.tsx
@@ -1,5 +1,4 @@
// A dropdown menu for selecting between Chat, Edit, and Agent modes with keyboard shortcuts
-import { Listbox } from "@headlessui/react";
import {
ChatBubbleLeftIcon,
CheckIcon,
@@ -11,7 +10,7 @@ import { MessageModes } from "core";
import { modelSupportsTools } from "core/llm/autodetect";
import { useEffect, useMemo } from "react";
import styled from "styled-components";
-import { defaultBorderRadius, lightGray, vscInputBackground } from "..";
+import { lightGray } from "..";
import { useAppDispatch, useAppSelector } from "../../redux/hooks";
import { selectDefaultModel } from "../../redux/slices/configSlice";
import {
@@ -19,57 +18,18 @@ import {
selectCurrentMode,
setMode,
} from "../../redux/slices/sessionSlice";
+import { exitEditMode } from "../../redux/thunks";
import {
- fontSize,
- getFontSize,
- getMetaKeyLabel,
- isJetBrains,
-} from "../../util";
-import Shortcut from "../gui/Shortcut";
-
-const StyledListboxButton = styled(Listbox.Button)`
- font-family: inherit;
- display: flex;
- align-items: center;
- gap: 2px;
- border: none;
- cursor: pointer;
- font-size: ${getFontSize() - 2}px;
- background: transparent;
- color: ${lightGray};
- &:focus {
- outline: none;
- }
-`;
-
-const StyledListboxOptions = styled(Listbox.Options)`
- margin-top: 4px;
- position: absolute;
- list-style: none;
- padding: 0px;
- min-width: 180px;
- cursor: default;
- display: flex;
- flex-direction: column;
- border-radius: ${defaultBorderRadius};
- border: 0.5px solid ${lightGray};
- background-color: ${vscInputBackground};
-`;
-
-const StyledListboxOption = styled(Listbox.Option)`
- border-radius: ${defaultBorderRadius};
- padding: 6px 12px;
- cursor: ${(props) => (props.disabled ? "not-allowed" : "pointer")};
- display: flex;
- align-items: center;
- gap: 8px;
- opacity: ${(props) => (props.disabled ? 0.5 : 1)};
-
- &:hover {
- background: ${(props) =>
- props.disabled ? "transparent" : `${lightGray}33`};
- }
-`;
+ loadLastSession,
+ saveCurrentSession,
+} from "../../redux/thunks/session";
+import { getFontSize, getMetaKeyLabel, isJetBrains } from "../../util";
+import {
+ Listbox,
+ ListboxButton,
+ ListboxOption,
+ ListboxOptions,
+} from "../ui/Listbox";
const ShortcutText = styled.span`
color: ${lightGray};
@@ -93,11 +53,11 @@ function ModeSelect() {
const getModeIcon = (mode: MessageModes) => {
switch (mode) {
case "agent":
- return ;
+ return ;
case "chat":
- return ;
+ return ;
case "edit":
- return ;
+ return ;
}
};
@@ -123,67 +83,79 @@ function ModeSelect() {
return (
{
+ onChange={async (newMode) => {
+ if (newMode === mode) {
+ return;
+ }
dispatch(setMode(newMode));
+ if (newMode === "edit") {
+ await dispatch(
+ saveCurrentSession({
+ generateTitle: false,
+ openNewSession: true,
+ }),
+ );
+ } else if (mode === "edit") {
+ await dispatch(
+ loadLastSession({
+ saveCurrentSession: false,
+ }),
+ );
+ dispatch(exitEditMode());
+ }
}}
>
-
-
- {getModeIcon(mode)}
-
- {mode.charAt(0).toUpperCase() + mode.slice(1)}
-
-
-
-
-
-
-
- Agent
- {/* */}
+ {getModeIcon(mode)}
+
+ {mode.charAt(0).toUpperCase() + mode.slice(1)}
+
+
+
+
+
+
+
+ Agent
+
{mode === "agent" && }
{!agentModeSupported && (Not supported)}
-
-
-
-
- Chat
- {metaKeyLabel}L
+
+
+
+
+
+ Chat
+ {getMetaKeyLabel()}L
+
{mode === "chat" && }
-
+
{!jetbrains && (
-
-
- Edit
- {metaKeyLabel}I
+
+
+
+
Edit
+
{getMetaKeyLabel()}I
+
- {metaKeyLabel}
- . for next mode
+ {metaKeyLabel}. for next mode
-
+
-
-
-
-
+
+
+
+
+
{option.title}
{showMissingApiKeyMsg && (
@@ -172,13 +106,18 @@ function ModelOption({
)}
-
-
- {isSelected &&
}
+
+ {isSelected && }
+ {hovered && (
+
+ )}
-
+
);
}
@@ -186,7 +125,6 @@ function ModelSelect() {
const dispatch = useDispatch();
const defaultModel = useAppSelector(selectDefaultModel);
const allModels = useAppSelector((state) => state.config.config.models);
- const [showAbove, setShowAbove] = useState(false);
const buttonRef = useRef
(null);
const [options, setOptions] = useState([]);
const [sortedOptions, setSortedOptions] = useState([]);
@@ -216,12 +154,6 @@ function ModelSelect() {
);
}, [allModels]);
- useEffect(() => {
- const handleResize = () => calculatePosition();
- window.addEventListener("resize", handleResize);
- return () => window.removeEventListener("resize", handleResize);
- }, []);
-
useEffect(() => {
const handleKeyDown = (event: KeyboardEvent) => {
if (event.key === "'" && isMetaEquivalentKeyPressed(event as any)) {
@@ -242,18 +174,6 @@ function ModelSelect() {
};
}, [options, defaultModel]);
- function calculatePosition() {
- if (!buttonRef.current) {
- return;
- }
- const rect = buttonRef.current.getBoundingClientRect();
- const spaceBelow = window.innerHeight - rect.bottom;
- const spaceAbove = rect.top;
- const dropdownHeight = MAX_HEIGHT_PX;
-
- setShowAbove(spaceBelow < dropdownHeight && spaceAbove > spaceBelow);
- }
-
function onClickAddModel(e: MouseEvent) {
e.stopPropagation();
e.preventDefault();
@@ -275,37 +195,29 @@ function ModelSelect() {
}
return (
+ // Hiad sfasdfasdf asdfasdf
{
if (val === defaultModel?.title) return;
dispatch(setDefaultModel({ title: val }));
}}
>
-
-
+
-
-
- {modelSelectTitle(defaultModel) || "Select model"}{" "}
-
-
-
-
-
-
+
+ {modelSelectTitle(defaultModel) || "Select model"}
+
+
+
+
+
{sortedOptions.map((option, idx) => (
-
-
-
+
{selectedProfile?.profileType === "local" && (
<>
-
Add Chat model
-
+
)}
-
-
-
- meta ' to toggle model
+
+ {getMetaKeyLabel()}' to toggle model
-
-
+
setHovered(true)}
+ onMouseLeave={() => setHovered(false)}
+ value={profile.id}
+ disabled={hasFatalErrors}
+ onClick={!hasFatalErrors ? handleOptionClick : undefined}
+ fontSizeModifier={-2}
+ >
+
+
+
+
+ {!profile.errors?.length ? (
+ isLocalProfile(profile) ? (
+
{
+ e.stopPropagation();
+ e.preventDefault();
+ handleConfigure();
+ }}
+ />
+ ) : (
+ {
+ e.stopPropagation();
+ e.preventDefault();
+ handleConfigure();
+ }}
+ />
+ )
+ ) : (
+ <>
+ {
+ e.preventDefault();
+ e.stopPropagation();
+ handleClickError();
+ }}
+ />
+
+ Errors
+ {JSON.stringify(profile.errors, null, 2)}
+
+
+ )}
+
+
+
);
-}
+};
export default function AssistantSelect() {
const dispatch = useAppDispatch();
const buttonRef = useRef
(null);
const { selectedProfile, selectedOrganization } = useAuth();
const ideMessenger = useContext(IdeMessengerContext);
+ const isLumpToolbarExpanded = useAppSelector(
+ (state) => state.ui.isBlockSettingsToolbarExpanded,
+ );
+
+ const { profiles, session, login } = useAuth();
+ const navigate = useNavigate();
+
+ function close() {
+ if (buttonRef.current) {
+ buttonRef.current.click();
+ }
+ }
+ function onNewAssistant() {
+ ideMessenger.post("controlPlane/openUrl", {
+ path: "new",
+ orgSlug: selectedOrganization?.slug,
+ });
+ close();
+ }
useEffect(() => {
let lastToggleTime = 0;
@@ -64,6 +188,9 @@ export default function AssistantSelect() {
};
}, []);
+ const tinyFont = useFontSize(-4);
+ const smallFont = useFontSize(-3);
+
if (!selectedProfile) {
return (
-
Create your first assistant
+
+
+ Create your first assistant
+
-
+
+
-
-
-
-
-
- {
- if (buttonRef.current) {
- buttonRef.current.click();
- }
- }}
- />
-
-
+
+
+
+ {selectedProfile.title}
+
+
+
+
+
+
+ {profiles?.map((profile, idx) => {
+ return (
+
+ );
+ })}
+
+
+
+
login(false)}
+ >
+
+
+
+
+
+
+
+ {getMetaKeyLabel()} ⇧ ' to toggle
+
+
navigate(ROUTES.CONFIG)}
+ >
+ {selectedOrganization?.iconUrl ? (
+
+ ) : (
+
+ )}
+
+ {selectedOrganization?.name || "Personal"}
+
+
+
+
-
- {profiles.map((profile, idx) => {
- return (
-
- );
- })}
-
-
-
-
login(false)}
- >
-
-
-
-
-
-
-
- {getMetaKeyLabel()} ⇧ ' to toggle
-
-
navigate(ROUTES.CONFIG)}
- >
- {selectedOrganization?.iconUrl ? (
-
- ) : (
-
- )}
-
- {selectedOrganization?.name || "Personal"}
-
-
-
-
-
-
- {children}
-
- {!errors?.length ? (
- showConfigure ? (
-
{
- e.stopPropagation();
- e.preventDefault();
- onOpenConfig();
- }}
- />
- ) : (
- {
- e.stopPropagation();
- e.preventDefault();
- onOpenConfig();
- }}
- />
- )
- ) : (
- <>
-
-
- Errors
- {JSON.stringify(errors, null, 2)}
-
-
- )}
-
-
-
{session.account.label}
@@ -46,11 +42,11 @@ export function AccountButton() {
)}
-
+
Sign out
-
+
);
diff --git a/gui/src/pages/config/ConfigItemSelect.tsx b/gui/src/pages/config/ConfigItemSelect.tsx
index 19d2556b97..320ea8cf7b 100644
--- a/gui/src/pages/config/ConfigItemSelect.tsx
+++ b/gui/src/pages/config/ConfigItemSelect.tsx
@@ -11,9 +11,13 @@ interface ConfigItemSelectProps {
onSelect: (id: string) => void;
}
-import { Popover } from "@headlessui/react";
import { ChevronDownIcon } from "@heroicons/react/24/outline";
-import PopoverTransition from "../../components/mainInput/InputToolbar/bottom/PopoverTransition";
+import {
+ Popover,
+ PopoverButton,
+ PopoverPanel,
+ Transition,
+} from "../../components/ui";
import { fontSize } from "../../util";
export function ConfigItemSelect({
@@ -45,7 +49,7 @@ export function ConfigItemSelect({
const popoverContent = (
-
@@ -54,10 +58,10 @@ export function ConfigItemSelect({
{activeItem?.label}
-
+
-
-
+
+
{items.map((item) => (
{item.label}
))}
-
-
+
+
-
0 ? "hover:bg-vsc-input-background cursor-pointer" : "cursor-not-allowed opacity-50"} text-vsc-foreground relative m-0 flex w-full items-center justify-between rounded-md border border-solid px-1.5 py-0.5 text-left text-sm`}
- >
- {models.length === 0 ? (
- {`No ${displayName} models${["Chat", "Apply", "Edit"].includes(displayName) ? ". Using chat model" : ""}`}
- ) : (
-
- {selectedModel?.title ?? `Select ${displayName} model`}
-
- )}
- {models.length ? (
-
-
-
- ) : null}
-
+
+
+ {models.length === 0 ? (
+ {`No ${displayName} models${["Chat", "Apply", "Edit"].includes(displayName) ? ". Using chat model" : ""}`}
+ ) : (
+
+ {selectedModel?.title ?? `Select ${displayName} model`}
+
+ )}
+ {models.length ? (
+
+
+
+ ) : null}
+
-
+
-
- {models.map((option, idx) => (
- (
+
+
-
- {option.title}
-
- {option.title === selectedModel?.title && (
-
- )}
-
- ))}
-
-
-
- )}
+ {option.title}
+
+ {option.title === selectedModel?.title && (
+
+ )}
+
+ ))}
+
+
+
-
-
-
- {selectedDisplay?.iconUrl ? (
-
- ) : (
-
- )}
-
- {selectedDisplay?.name || "Select Organization"}
-
-
-
+
+
+ {selectedDisplay?.iconUrl ? (
+
+ ) : (
+
+ )}
+
+ {selectedDisplay?.name || "Select Organization"}
+
-
- {organizations.length > 0 && (
- <>
-
- Organizations
+
+ {organizations.map((org) => (
+
+
+ {org.iconUrl ? (
+
+ ) : (
+
+ )}
+
{org.name}
- {org.iconUrl ? (
-
- ) : (
-
- )}
-
{org.name}
-
Personal
-
-
+
+
{!controlServerBetaEnabled || hubEnabled ? (
-
+
User settings
@@ -208,7 +208,7 @@ export function UserSettingsForm() {
/> */}
diff --git a/gui/src/pages/gui/index.tsx b/gui/src/pages/gui/index.tsx
index 31784a358b..788d88b232 100644
--- a/gui/src/pages/gui/index.tsx
+++ b/gui/src/pages/gui/index.tsx
@@ -3,7 +3,7 @@ import { Chat } from "./Chat";
export default function GUI() {
return (
-
+
diff --git a/gui/src/util/cn.ts b/gui/src/util/cn.ts
new file mode 100644
index 0000000000..a5ef193506
--- /dev/null
+++ b/gui/src/util/cn.ts
@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+ return twMerge(clsx(inputs));
+}
diff --git a/package.json b/package.json
index c093fccd9a..dd376f1ec2 100644
--- a/package.json
+++ b/package.json
@@ -7,6 +7,7 @@
"tsc:watch:binary": "tsc --project binary/tsconfig.json --watch --noEmit --pretty"
},
"devDependencies": {
+ "typescript": "^5.6.3",
"@typescript-eslint/parser": "^7.8.0",
"eslint-plugin-import": "^2.29.1",
"prettier": "^3.3.3",