Skip to content

Commit

Permalink
Merge pull request #258 from trypear/feat/lh/FixSpacingOnChatBar
Browse files Browse the repository at this point in the history
  • Loading branch information
@lenghuang
lenghuang authored Feb 5, 2025
2 parents bea43d0 + 902f638 commit 8729298
Show file tree
Hide file tree
Showing 5 changed files with 69 additions and 99 deletions.
78 changes: 29 additions & 49 deletions gui/src/components/InventoryPreview.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,51 +1,35 @@
import { Link, useNavigate } from "react-router-dom";
import { useContext } from "react";
import { getLogoPath } from "@/pages/welcome/setup/ImportExtensions";
import { IdeMessengerContext } from "@/context/IdeMessenger";
import { ShortcutButton } from "./ui/shortcutButton";
import { useSelector } from "react-redux";
import { RootState } from "@/redux/store";
import { getMetaKeyLabel } from "@/util";

const InventoryPreview = () => {
const navigate = useNavigate();
const ideMessenger = useContext(IdeMessengerContext);
const historyLength = useSelector((state: RootState) => state.state.history.length);

const menuItems = [
{
icon: "chat-default.svg",
path: "/inventory/aiderMode",
tooltip: "Inventory",
command: "pearai.toggleInventoryHome",
},
{
icon: "creator-default.svg",
path: "/inventory/aiderMode",
tooltip: "Creator",
command: "pearai.toggleCreator",
},
{
icon: "search-default.svg",
path: "/inventory/perplexityMode",
tooltip: "Search",
command: "pearai.toggleSearch",
},
{
icon: "memory-default.svg",
path: "/inventory/mem0Mode",
tooltip: "Memory",
command: "pearai.toggleMem0",
}
];

const openInventory = () => {
ideMessenger.post("openInventoryHome", undefined);
};
const menuItems = [
{
icon: "chat-default.svg",
path: "/inventory/aiderMode",
tooltip: "Inventory",
command: "pearai.toggleInventoryHome",
},
{
icon: "creator-default.svg",
path: "/inventory/aiderMode",
tooltip: "Creator",
command: "pearai.toggleCreator",
},
{
icon: "search-default.svg",
path: "/inventory/perplexityMode",
tooltip: "Search",
command: "pearai.toggleSearch",
},
{
icon: "memory-default.svg",
path: "/inventory/mem0Mode",
tooltip: "Memory",
command: "pearai.toggleMem0",
}
];

const InventoryPreview = () => {
return (
<div className={`mt-2 relative w-full z-10`}>

<div className={`my-2 relative w-full z-10`}>
<div
className="flex cursor-pointer"
>
Expand All @@ -57,7 +41,7 @@ const InventoryPreview = () => {
boxShadow: 'inset 0px 0px 0px 1px rgba(255, 255, 255, 0.1)'
}}
/>
<div className="flex gap-[6px] bg-clip-border bg-input p-[4px] cursor-pointer">
<div className="flex gap-[6px] bg-clip-border bg-input px-[6px] py-[4px] cursor-pointer">
{menuItems.map((item, index) => (
<div
key={`${item.command}-${index}`}
Expand Down Expand Up @@ -85,10 +69,6 @@ const InventoryPreview = () => {
))}
</div>
</div>

{/* <div className="ml-1">
<ShortcutButton keys={["⌘", "E"]} label={"Inventory"} labelInside={true} />
</div> */}
</div>
</div>

Expand Down
6 changes: 3 additions & 3 deletions gui/src/components/ProfileSwitcher.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,8 @@
import { Listbox, Transition } from "@headlessui/react";
import {
ChevronUpDownIcon,
Cog6ToothIcon,
CogIcon,
UserCircleIcon,
UserCircleIcon
} from "@heroicons/react/24/outline";
import { ProfileDescription } from "core/config/ConfigHandler";
import { Fragment, useContext, useEffect, useState } from "react";
Expand Down Expand Up @@ -235,7 +234,7 @@ function ProfileSwitcher(props: {}) {
{/* Settings button (either opens config.json or /settings page in control plane) */}
<HeaderButtonWithText
tooltipPlacement="top-end"
className="z-10"
className="flex-none z-10"
onClick={() => {
if (selectedProfileId === "local") {
ideMessenger.post("openConfigJson", undefined);
Expand All @@ -254,6 +253,7 @@ function ProfileSwitcher(props: {}) {
{/* Only show login if beta explicitly enabled */}
{controlServerBetaEnabled && (
<HeaderButtonWithText
className="flex-none"
tooltipPlacement="top-end"
text={
session?.account
Expand Down
16 changes: 8 additions & 8 deletions gui/src/components/StatusBar.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
import { useSelector } from "react-redux";
import { useNavigate } from "react-router-dom";
import { useWebviewListener } from "@/hooks/useWebviewListener";
import { QuestionMarkCircleIcon } from "@heroicons/react/24/outline";
import { IndexingProgressUpdate } from "core";
import { useState } from "react";
import ProfileSwitcher from "./ProfileSwitcher";
import { useSelector } from "react-redux";
import { useNavigate } from "react-router-dom";
import { defaultModelSelector } from "../redux/selectors/modelSelectors";
import HeaderButtonWithText from "./HeaderButtonWithText";
import IndexingProgressBar from "./loaders/IndexingProgressBar";
import { defaultModelSelector } from "../redux/selectors/modelSelectors";
import { useWebviewListener } from "@/hooks/useWebviewListener";
import ModelSelect from "./modelSelection/ModelSelect";
import ProfileSwitcher from "./ProfileSwitcher";

const StatusBar = () => {
const navigate = useNavigate();
Expand All @@ -23,22 +23,22 @@ const StatusBar = () => {
});

return (
<div className="items-center flex justify-between">
<div className="items-center flex justify-between gap-2 w-full overflow-hidden">
<div className="flex items-center gap-2">
{/* Indexing Progress Bar */}
<IndexingProgressBar indexingState={indexingState} />
</div>

{/* Header Controls */}
<div className="flex items-center gap-1">
<div className="flex w-full items-center gap-1 justify-end min-w-0">
<ModelSelect />

<ProfileSwitcher />

<HeaderButtonWithText
tooltipPlacement="top-end"
text="Help"
className="z-10"
className="flex-none z-10"
onClick={() => {
navigate(location.pathname === "/help" ? "/" : "/help");
}}
Expand Down
32 changes: 16 additions & 16 deletions gui/src/components/modelSelection/ModelSelect.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,17 @@
import { isAiderMode } from "@/util/bareChatMode";
import { Listbox } from "@headlessui/react";
import {
ChevronDownIcon,
CubeIcon,
PlusIcon,
TrashIcon,
TrashIcon
} from "@heroicons/react/24/outline";
import { useContext, useEffect, useRef, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { useLocation, useNavigate } from "react-router-dom";
import { useNavigate } from "react-router-dom";
import styled from "styled-components";
import { defaultBorderRadius, lightGray, vscEditorBackground } from "..";
import { lightGray, vscEditorBackground } from "..";
import { IdeMessengerContext } from "../../context/IdeMessenger";
import { providers } from "../../pages/AddNewModel/configs/providers";
import { defaultModelSelector } from "../../redux/selectors/modelSelectors";
import { setDefaultModel } from "../../redux/slices/stateSlice";
import {
Expand All @@ -24,16 +25,13 @@ import {
isMetaEquivalentKeyPressed,
} from "../../util";
import ConfirmationDialog from "../dialogs/ConfirmationDialog";
import { isAiderMode, isPerplexityMode } from "@/util/bareChatMode";
import { providers } from "../../pages/AddNewModel/configs/providers";

const StyledListboxButton = styled(Listbox.Button)`
border: solid 1px ${lightGray}30;
// background-color: ${lightGray}30;
background-color: transparent;
border-radius: 4px;
border-radius: 4px;
padding: 2px 4px;
display: flex;
margin: 0 2px;
align-items: center;
gap: 2px;
user-select: none;
Expand All @@ -51,7 +49,7 @@ const StyledListboxOptions = styled(Listbox.Options) <{ newSession: boolean }>`
white-space: nowrap;
cursor: default;
z-index: 50;
border: 1px solid ${lightGray}30;
border: 1px solid ${lightGray}30;
border-radius: 10px;
background-color: ${vscEditorBackground};
max-height: 300px;
Expand Down Expand Up @@ -177,7 +175,7 @@ function ModelOption({
) : (
option.provider ? <img
src={`${window.vscMediaUrl}/logos/${providers[option.provider]?.icon}`}
className="w-3.5 h-3.5 mr-2 flex-shrink-0 object-contain rounded-sm"
className="w-3.5 h-3.5 mr-2 flex-none object-contain rounded-sm"
/> : <CubeIcon className="w-3.5 h-3.5 stroke-2 mr-2 flex-shrink-0" />
)}
<span>{option.title}</span>
Expand Down Expand Up @@ -302,7 +300,7 @@ function ModelSelect() {
dispatch(setDefaultModel({ title: val }));
}}
as="div"
className="relative inline-block"
className="flex max-w-[75%]"
>
{({ open }) => {
useEffect(() => {
Expand All @@ -313,10 +311,10 @@ function ModelSelect() {
<>
<StyledListboxButton
ref={buttonRef}
className="h-[18px] overflow-hidden"
className="h-[18px] flex overflow-hidden"
>
{defaultModel?.provider === 'pearai_server' ? (
<div className="flex items-center">
<div className="flex flex-initial items-center">
<img
src={`${window.vscMediaUrl}/logos/pearai-color.png`}
className="w-[15px] h-[15px] object-contain"
Expand All @@ -337,7 +335,7 @@ function ModelSelect() {
return 'default.png';
}
})()}`}
className="w-[15px] h-[12px] object-contain rounded-sm "
className="w-[15px] h-[12px] object-contain rounded-sm"
/>}
</div>
) : (
Expand All @@ -350,7 +348,9 @@ function ModelSelect() {
}}
/>
)}
{modelSelectTitle(defaultModel) || "Select model"}{" "}
<span className="truncate inline-block min-w-0">
{modelSelectTitle(defaultModel) || "Select model"}{" "}
</span>
</StyledListboxButton>

{open && (
Expand Down
36 changes: 13 additions & 23 deletions gui/src/pages/gui.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,9 @@
import InventoryPreview from "@/components/InventoryPreview";
import ShortcutContainer from "@/components/ShortcutContainer";
import StatusBar from "@/components/StatusBar";
import WarningCard from "@/components/ui/warningcard";
import { setActiveFilePath } from "@/redux/slices/uiStateSlice";
import { getLocalStorage, setLocalStorage } from "@/util/localStorage";
import {
BackspaceIcon,
ChatBubbleOvalLeftIcon,
Expand Down Expand Up @@ -49,21 +55,13 @@ import {
isMetaEquivalentKeyPressed,
} from "../util";
import { FREE_TRIAL_LIMIT_REQUESTS } from "../util/freeTrial";
import { getLocalStorage, setLocalStorage } from "@/util/localStorage";
import OnboardingTutorial from "./onboarding/OnboardingTutorial";
import StatusBar from "@/components/StatusBar";
import InventoryPreview from "@/components/InventoryPreview";
import { setActiveFilePath } from "@/redux/slices/uiStateSlice";
import WarningCard from "@/components/ui/warningcard";
import ShortcutContainer from "@/components/ShortcutContainer";

const LENGTHY_MESSAGE_WARNING_INDEX = 14; // number of messages after which we show the warning card

export const TopGuiDiv = styled.div<{ isNewSession: boolean }>`
overflow-y: scroll;
position: relative;
margin-top: -40px;
padding-top: 48px;
scrollbar-width: none;
&::-webkit-scrollbar {
display: none;
Expand Down Expand Up @@ -229,11 +227,11 @@ function GUI() {
const scrollTop = topGuiDivRef.current.scrollTop;
const height = inputContainerRef.current.offsetHeight;
const newPadding = isNewSession ? '0px' : `${height + 20}px`;

topGuiDivRef.current.style.paddingBottom = '0px';
topGuiDivRef.current.offsetHeight;
topGuiDivRef.current.style.paddingBottom = newPadding;

topGuiDivRef.current.scrollTop = scrollTop;
}
});
Expand Down Expand Up @@ -368,12 +366,9 @@ function GUI() {
<OnboardingTutorial onClose={onCloseTutorialCard} />
</TutorialCardDiv>
}
<div className="pb-1 flex px-2">
<div
className="flex-col gap-2 "
>
<InventoryPreview />
</div>

<div className="flex px-2">
<InventoryPreview />
</div>

<TopGuiDiv ref={topGuiDivRef} onScroll={handleScroll} isNewSession={isNewSession}>
Expand All @@ -383,7 +378,6 @@ function GUI() {

return (
<Fragment key={index}>

<ErrorBoundary
FallbackComponent={fallbackRender}
onReset={() => {
Expand Down Expand Up @@ -414,7 +408,6 @@ function GUI() {
</div>
</div>
) : (
// <div className="p-4 bg-orange-500 my-4">
<TimelineItem
item={item}
iconElement={
Expand Down Expand Up @@ -490,9 +483,6 @@ function GUI() {
</WarningCard>
)}
</TimelineItem>


// </div>
)}
</div>
</ErrorBoundary>
Expand All @@ -501,8 +491,8 @@ function GUI() {
})}
</TopGuiDiv>
{!active && (
<InputContainer
ref={inputContainerRef}
<InputContainer
ref={inputContainerRef}
isNewSession={isNewSession}>
<ContinueInputBox
onEnter={(editorContent, modifiers) => {
Expand Down

0 comments on commit 8729298

Please sign in to comment.