+ {!!title &&
+ );
+};
+
+export default memo(CommandBarBodySection);
diff --git a/client/src/CommandBar/Body/SectionDivider.tsx b/client/src/CommandBar/Body/SectionDivider.tsx
new file mode 100644
index 0000000000..3c4e7f4dd5
--- /dev/null
+++ b/client/src/CommandBar/Body/SectionDivider.tsx
@@ -0,0 +1,15 @@
+import { memo } from 'react';
+
+type Props = {
+ text: string;
+};
+
+const SectionDivider = ({ text }: Props) => {
+ return (
+
+ {text}
+
+ );
+};
+
+export default memo(SectionDivider);
diff --git a/client/src/CommandBar/Body/index.tsx b/client/src/CommandBar/Body/index.tsx
new file mode 100644
index 0000000000..fbbebacd77
--- /dev/null
+++ b/client/src/CommandBar/Body/index.tsx
@@ -0,0 +1,60 @@
+import { memo, useCallback, useEffect, useState } from 'react';
+import { CommandBarSectionType } from '../../types/general';
+import useKeyboardNavigation from '../../hooks/useKeyboardNavigation';
+import Section from './Section';
+
+type Props = {
+ sections: CommandBarSectionType[];
+ disableKeyNav?: boolean;
+};
+
+const CommandBarBody = ({ sections, disableKeyNav }: Props) => {
+ const [focusedIndex, setFocusedIndex] = useState(0);
+
+ useEffect(() => {
+ setFocusedIndex(0);
+ }, [sections]);
+
+ const handleKeyEvent = useCallback(
+ (e: KeyboardEvent) => {
+ if (e.key === 'ArrowDown') {
+ e.preventDefault();
+ e.stopPropagation();
+ setFocusedIndex((prev) =>
+ prev <
+ sections.reduce((prev, curr) => prev + curr.items.length, 0) - 1
+ ? prev + 1
+ : 0,
+ );
+ } else if (e.key === 'ArrowUp') {
+ e.preventDefault();
+ e.stopPropagation();
+ setFocusedIndex((prev) =>
+ prev > 0
+ ? prev - 1
+ : sections.reduce((prev, curr) => prev + curr.items.length, 0) - 1,
+ );
+ }
+ },
+ [sections],
+ );
+ useKeyboardNavigation(handleKeyEvent, disableKeyNav);
+
+ return (
+
+ {sections.map((s) => (
+
+ ))}
+
+ );
+};
+
+export default memo(CommandBarBody);
diff --git a/client/src/CommandBar/Footer/HintButton.tsx b/client/src/CommandBar/Footer/HintButton.tsx
new file mode 100644
index 0000000000..e617e496a1
--- /dev/null
+++ b/client/src/CommandBar/Footer/HintButton.tsx
@@ -0,0 +1,33 @@
+import { ForwardedRef, forwardRef, memo } from 'react';
+import useShortcuts from '../../hooks/useShortcuts';
+
+type Props = {
+ label: string;
+ shortcut?: string[];
+};
+
+const HintButton = forwardRef(
+ ({ label, shortcut }: Props, ref: ForwardedRef
+ {label}
+ {shortcutKeys?.map((k) => (
+
+ );
+ },
+);
+
+HintButton.displayName = 'HintButtonWithRef';
+
+export default memo(HintButton);
diff --git a/client/src/CommandBar/Footer/index.tsx b/client/src/CommandBar/Footer/index.tsx
new file mode 100644
index 0000000000..9bfe07f541
--- /dev/null
+++ b/client/src/CommandBar/Footer/index.tsx
@@ -0,0 +1,58 @@
+import { memo, useCallback, useContext, useRef } from 'react';
+import { useTranslation } from 'react-i18next';
+import { CommandBarContext } from '../../context/commandBarContext';
+import Dropdown from '../../components/Dropdown';
+import useKeyboardNavigation from '../../hooks/useKeyboardNavigation';
+import HintButton from './HintButton';
+
+type Props = {
+ ActionsDropdown?: (props: any) => JSX.Element | null;
+ actionsDropdownProps?: Record
+ {k}
+
+ ))}
+
+
+
+ )}
+
+ );
+};
+
+export default memo(CommandBarFooter);
diff --git a/client/src/CommandBar/Header/ChipItem.tsx b/client/src/CommandBar/Header/ChipItem.tsx
new file mode 100644
index 0000000000..93c8331b6a
--- /dev/null
+++ b/client/src/CommandBar/Header/ChipItem.tsx
@@ -0,0 +1,13 @@
+import { memo } from 'react';
+
+type Props = { text: string };
+
+const CommandBarChipItem = ({ text }: Props) => {
+ return (
+ + {focusedItem?.footerHint} +
+ {focusedItem?.footerBtns?.map((b) =>
+ {text}
+
+ );
+};
+
+export default memo(CommandBarChipItem);
diff --git a/client/src/CommandBar/Header/index.tsx b/client/src/CommandBar/Header/index.tsx
new file mode 100644
index 0000000000..c8155fb13d
--- /dev/null
+++ b/client/src/CommandBar/Header/index.tsx
@@ -0,0 +1,117 @@
+import {
+ ChangeEvent,
+ memo,
+ ReactElement,
+ useCallback,
+ useContext,
+ useState,
+} from 'react';
+import { useTranslation } from 'react-i18next';
+import Tooltip from '../../components/Tooltip';
+import useKeyboardNavigation from '../../hooks/useKeyboardNavigation';
+import { CommandBarContext } from '../../context/commandBarContext';
+import ChipItem from './ChipItem';
+
+type PropsWithoutInput = {
+ noInput: true;
+ customSubmitHandler?: never;
+ onChange?: never;
+ value?: never;
+ placeholder?: never;
+};
+
+type PropsWithInput = {
+ noInput?: false;
+ value: string;
+ onChange: (e: ChangeEvent
+
+ );
+};
+
+export default memo(CommandBarHeader);
diff --git a/client/src/CommandBar/index.tsx b/client/src/CommandBar/index.tsx
new file mode 100644
index 0000000000..3f059a44e7
--- /dev/null
+++ b/client/src/CommandBar/index.tsx
@@ -0,0 +1,83 @@
+import { memo, useCallback, useContext } from 'react';
+import Modal from '../components/Modal';
+import useKeyboardNavigation from '../hooks/useKeyboardNavigation';
+import { CommandBarStepEnum } from '../types/general';
+import { CommandBarContext } from '../context/commandBarContext';
+import { useGlobalShortcuts } from '../hooks/useGlobalShortcuts';
+import { checkEventKeys } from '../utils/keyboardUtils';
+import Initial from './steps/Initial';
+import PrivateRepos from './steps/PrivateRepos';
+import PublicRepos from './steps/PublicRepos';
+import LocalRepos from './steps/LocalRepos';
+import Documentation from './steps/Documentation';
+import CreateProject from './steps/CreateProject';
+import ManageRepos from './steps/ManageRepos';
+import AddNewRepo from './steps/AddNewRepo';
+import ToggleTheme from './steps/ToggleTheme';
+
+type Props = {};
+
+const CommandBar = ({}: Props) => {
+ const { chosenStep } = useContext(CommandBarContext.CurrentStep);
+ const { isVisible } = useContext(CommandBarContext.General);
+ const { setChosenStep, setIsVisible } = useContext(
+ CommandBarContext.Handlers,
+ );
+ const globalShortcuts = useGlobalShortcuts();
+
+ const handleClose = useCallback(() => {
+ setIsVisible(false);
+ setChosenStep({
+ id: CommandBarStepEnum.INITIAL,
+ });
+ }, []);
+
+ const handleKeyEvent = useCallback(
+ (e: KeyboardEvent) => {
+ if (checkEventKeys(e, ['cmd', 'K'])) {
+ e.stopPropagation();
+ e.preventDefault();
+ setIsVisible(true);
+ }
+ Object.values(globalShortcuts).forEach((s) => {
+ if (checkEventKeys(e, s.shortcut)) {
+ e.stopPropagation();
+ e.preventDefault();
+ s.action();
+ }
+ });
+ },
+ [isVisible, globalShortcuts],
+ );
+ useKeyboardNavigation(handleKeyEvent);
+
+ return (
+
+
+
+
+ {!!handleBack && (
+
+
+
+ )}
+ {breadcrumbs?.map((b) =>
+ {customRightComponent}
+
+
+
+
+ );
+};
+
+export default memo(AddNewRepo);
diff --git a/client/src/CommandBar/steps/CreateProject.tsx b/client/src/CommandBar/steps/CreateProject.tsx
new file mode 100644
index 0000000000..549651c8e1
--- /dev/null
+++ b/client/src/CommandBar/steps/CreateProject.tsx
@@ -0,0 +1,81 @@
+import {
+ ChangeEvent,
+ memo,
+ useCallback,
+ useContext,
+ useEffect,
+ useMemo,
+ useState,
+} from 'react';
+import { useTranslation } from 'react-i18next';
+import Header from '../Header';
+import Footer from '../Footer';
+import { CommandBarStepEnum } from '../../types/general';
+import { CommandBarContext } from '../../context/commandBarContext';
+import { createProject } from '../../services/api';
+import { ProjectContext } from '../../context/projectContext';
+
+type Props = {};
+
+const CreateProject = ({}: Props) => {
+ const { t } = useTranslation();
+ const [inputValue, setInputValue] = useState('');
+ const { setChosenStep, setFocusedItem, setIsVisible } = useContext(
+ CommandBarContext.Handlers,
+ );
+ const { setCurrentProjectId } = useContext(ProjectContext.Current);
+ const { refreshAllProjects } = useContext(ProjectContext.All);
+
+ const handleInputChange = useCallback((e: ChangeEvent
+
+ );
+};
+
+export default memo(CreateProject);
diff --git a/client/src/CommandBar/steps/Documentation.tsx b/client/src/CommandBar/steps/Documentation.tsx
new file mode 100644
index 0000000000..ec797241a2
--- /dev/null
+++ b/client/src/CommandBar/steps/Documentation.tsx
@@ -0,0 +1,197 @@
+import {
+ ChangeEvent,
+ memo,
+ useCallback,
+ useContext,
+ useEffect,
+ useMemo,
+ useState,
+} from 'react';
+import { useTranslation } from 'react-i18next';
+import { CommandBarSectionType, CommandBarStepEnum } from '../../types/general';
+import { CommandBarContext } from '../../context/commandBarContext';
+import { getIndexedDocs, verifyDocsUrl } from '../../services/api';
+import { PlusSignIcon } from '../../icons';
+import { DocShortType } from '../../types/api';
+import Header from '../Header';
+import Body from '../Body';
+import Footer from '../Footer';
+import DocItem from './items/DocItem';
+
+type Props = {};
+
+const Documentation = ({}: Props) => {
+ const { t } = useTranslation();
+ const [isAddMode, setIsAddMode] = useState(false);
+ const [hasFetched, setHasFetched] = useState(false);
+ const [indexedDocs, setIndexedDocs] = useState
+
}
+
+
+ );
+};
+
+export default memo(Documentation);
diff --git a/client/src/CommandBar/steps/Initial.tsx b/client/src/CommandBar/steps/Initial.tsx
new file mode 100644
index 0000000000..5860eaa36b
--- /dev/null
+++ b/client/src/CommandBar/steps/Initial.tsx
@@ -0,0 +1,320 @@
+import {
+ ChangeEvent,
+ memo,
+ useCallback,
+ useContext,
+ useMemo,
+ useState,
+} from 'react';
+import { useTranslation } from 'react-i18next';
+import { ProjectContext } from '../../context/projectContext';
+import {
+ BugIcon,
+ CogIcon,
+ ColorSwitchIcon,
+ DocumentsIcon,
+ DoorOutIcon,
+ MagazineIcon,
+ PlusSignIcon,
+ RegexIcon,
+ RepositoryIcon,
+ WalletIcon,
+} from '../../icons';
+import { CommandBarContext } from '../../context/commandBarContext';
+import Header from '../Header';
+import Body from '../Body';
+import Footer from '../Footer';
+import {
+ CommandBarItemGeneralType,
+ CommandBarSectionType,
+ CommandBarStepEnum,
+} from '../../types/general';
+import { UIContext } from '../../context/uiContext';
+import { useGlobalShortcuts } from '../../hooks/useGlobalShortcuts';
+import {
+ getJsonFromStorage,
+ RECENT_COMMANDS_KEY,
+} from '../../services/storage';
+import { bubbleUpRecentItems } from '../../utils/commandBarUtils';
+
+type Props = {};
+
+const InitialCommandBar = ({}: Props) => {
+ const { t } = useTranslation();
+ const { setIsVisible } = useContext(CommandBarContext.Handlers);
+ const { tabItems, newTabItems } = useContext(CommandBarContext.FocusedTab);
+ const { projects } = useContext(ProjectContext.All);
+ const { setCurrentProjectId, project } = useContext(ProjectContext.Current);
+ const { theme } = useContext(UIContext.Theme);
+ const [inputValue, setInputValue] = useState('');
+ const globalShortcuts = useGlobalShortcuts();
+
+ const handleInputChange = useCallback((e: ChangeEvent
+
}
+
+
+ );
+};
+
+export default memo(InitialCommandBar);
diff --git a/client/src/CommandBar/steps/LocalRepos.tsx b/client/src/CommandBar/steps/LocalRepos.tsx
new file mode 100644
index 0000000000..4cf9d2a977
--- /dev/null
+++ b/client/src/CommandBar/steps/LocalRepos.tsx
@@ -0,0 +1,171 @@
+import {
+ ChangeEvent,
+ memo,
+ useCallback,
+ useContext,
+ useEffect,
+ useMemo,
+ useState,
+} from 'react';
+import { useTranslation } from 'react-i18next';
+import { CommandBarContext } from '../../context/commandBarContext';
+import { PlusSignIcon } from '../../icons';
+import {
+ CommandBarSectionType,
+ CommandBarStepEnum,
+ RepoProvider,
+} from '../../types/general';
+import { getIndexedRepos, scanLocalRepos, syncRepo } from '../../services/api';
+import { DeviceContext } from '../../context/deviceContext';
+import Footer from '../Footer';
+import Body from '../Body';
+import Header from '../Header';
+import RepoItem from './items/RepoItem';
+
+type Props = {};
+
+const LocalRepos = ({}: Props) => {
+ const { t } = useTranslation();
+ const [chosenFolder, setChosenFolder] = useState
+
+
+
+ );
+};
+
+export default memo(LocalRepos);
diff --git a/client/src/CommandBar/steps/ManageRepos/ActionsDropdown.tsx b/client/src/CommandBar/steps/ManageRepos/ActionsDropdown.tsx
new file mode 100644
index 0000000000..4f8ce109a4
--- /dev/null
+++ b/client/src/CommandBar/steps/ManageRepos/ActionsDropdown.tsx
@@ -0,0 +1,191 @@
+import {
+ Dispatch,
+ memo,
+ SetStateAction,
+ useCallback,
+ useContext,
+ useMemo,
+ useState,
+} from 'react';
+import { useTranslation } from 'react-i18next';
+import SectionLabel from '../../../components/Dropdown/Section/SectionLabel';
+import SectionItem from '../../../components/Dropdown/Section/SectionItem';
+import DropdownSection from '../../../components/Dropdown/Section';
+import { CommandBarContext } from '../../../context/commandBarContext';
+import useKeyboardNavigation from '../../../hooks/useKeyboardNavigation';
+import { HardDriveIcon, ShapesIcon } from '../../../icons';
+import GitHubIcon from '../../../icons/GitHubIcon';
+import { Filter, Provider } from './index';
+
+type Props = {
+ setRepoType: Dispatch
+ {!!focusedDropdownItems.length &&
+ focusedDropdownItems.map(
+ (section: {
+ items: Record[];
+ key: string;
+ itemsOffset: number;
+ }) => (
+
+ {section.items.map((item: Record, i: number) => (
+
+ ),
+ )}
+
+ setRepoType(type)}
+ label={t(type)}
+ icon={
+
+ setFilter(type)}
+ label={t(type)}
+ />
+ ))}
+
+
+ );
+};
+
+export default memo(ActionsDropDown);
diff --git a/client/src/CommandBar/steps/ManageRepos/index.tsx b/client/src/CommandBar/steps/ManageRepos/index.tsx
new file mode 100644
index 0000000000..31d62ddf8d
--- /dev/null
+++ b/client/src/CommandBar/steps/ManageRepos/index.tsx
@@ -0,0 +1,212 @@
+import {
+ ChangeEvent,
+ memo,
+ useCallback,
+ useContext,
+ useEffect,
+ useMemo,
+ useState,
+} from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+ CommandBarItemCustomType,
+ CommandBarItemGeneralType,
+ CommandBarItemType,
+ CommandBarSectionType,
+ CommandBarStepEnum,
+ RepoProvider,
+ SyncStatus,
+} from '../../../types/general';
+import { PlusSignIcon } from '../../../icons';
+import Header from '../../Header';
+import Body from '../../Body';
+import Footer from '../../Footer';
+import { getIndexedRepos } from '../../../services/api';
+import { mapReposBySections } from '../../../utils/mappers';
+import { ProjectContext } from '../../../context/projectContext';
+import { CommandBarContext } from '../../../context/commandBarContext';
+import RepoItem from '../items/RepoItem';
+import ActionsDropdown from './ActionsDropdown';
+
+type Props = {};
+
+export enum Filter {
+ All = 'All',
+ Indexed = 'Indexed',
+ Indexing = 'Indexing',
+ InThisProject = 'In this project',
+}
+
+export enum Provider {
+ All = 'All',
+ GitHub = 'GitHub',
+ Local = 'Local',
+}
+
+const ManageRepos = ({}: Props) => {
+ const { t } = useTranslation();
+ const { project } = useContext(ProjectContext.Current);
+ const { setChosenStep } = useContext(CommandBarContext.Handlers);
+ const [sections, setSections] = useState
+
+ )}
+
+
+ );
+};
+
+export default memo(ManageRepos);
diff --git a/client/src/CommandBar/steps/PrivateRepos/ActionsDropdown.tsx b/client/src/CommandBar/steps/PrivateRepos/ActionsDropdown.tsx
new file mode 100644
index 0000000000..9db4637fa8
--- /dev/null
+++ b/client/src/CommandBar/steps/PrivateRepos/ActionsDropdown.tsx
@@ -0,0 +1,89 @@
+import { memo, useCallback, useContext, useMemo, useState } from 'react';
+import SectionItem from '../../../components/Dropdown/Section/SectionItem';
+import DropdownSection from '../../../components/Dropdown/Section';
+import { CommandBarContext } from '../../../context/commandBarContext';
+import useKeyboardNavigation from '../../../hooks/useKeyboardNavigation';
+
+type Props = {};
+
+const ActionsDropDown = ({}: Props) => {
+ const { focusedItem } = useContext(CommandBarContext.FooterValues);
+ const [focusedIndex, setFocusedIndex] = useState(0);
+
+ const focusedDropdownItems = useMemo(() => {
+ return (
+ (focusedItem &&
+ 'focusedItemProps' in focusedItem &&
+ focusedItem.focusedItemProps?.dropdownItems) ||
+ []
+ );
+ }, [focusedItem]);
+
+ const focusedDropdownItemsLength = useMemo(() => {
+ return focusedDropdownItems.reduce(
+ (prev: number, curr: { items: Record
+ {!!focusedDropdownItems.length &&
+ focusedDropdownItems.map(
+ (section: {
+ items: Record[];
+ key: string;
+ itemsOffset: number;
+ }) => (
+
+ {section.items.map((item: Record, i: number) => (
+
+ ),
+ )}
+
+ );
+};
+
+export default memo(ActionsDropDown);
diff --git a/client/src/CommandBar/steps/PrivateRepos/index.tsx b/client/src/CommandBar/steps/PrivateRepos/index.tsx
new file mode 100644
index 0000000000..b0d3cb99bc
--- /dev/null
+++ b/client/src/CommandBar/steps/PrivateRepos/index.tsx
@@ -0,0 +1,119 @@
+import {
+ ChangeEvent,
+ memo,
+ useCallback,
+ useContext,
+ useEffect,
+ useMemo,
+ useState,
+} from 'react';
+import { useTranslation } from 'react-i18next';
+import { CommandBarContext } from '../../../context/commandBarContext';
+import {
+ CommandBarItemCustomType,
+ CommandBarSectionType,
+ CommandBarStepEnum,
+ RepoProvider,
+ SyncStatus,
+} from '../../../types/general';
+import { getRepos } from '../../../services/api';
+import { mapReposBySections } from '../../../utils/mappers';
+import Header from '../../Header';
+import Body from '../../Body';
+import Footer from '../../Footer';
+import RepoItem from '../items/RepoItem';
+import ActionsDropdown from './ActionsDropdown';
+
+type Props = {};
+
+const PrivateReposStep = ({}: Props) => {
+ const { t } = useTranslation();
+ const [sections, setSections] = useState
+
+ )}
+
+
+ );
+};
+
+export default memo(PrivateReposStep);
diff --git a/client/src/CommandBar/steps/PublicRepos.tsx b/client/src/CommandBar/steps/PublicRepos.tsx
new file mode 100644
index 0000000000..39419adfb3
--- /dev/null
+++ b/client/src/CommandBar/steps/PublicRepos.tsx
@@ -0,0 +1,101 @@
+import {
+ ChangeEvent,
+ memo,
+ useCallback,
+ useContext,
+ useEffect,
+ useMemo,
+ useState,
+} from 'react';
+import { useTranslation } from 'react-i18next';
+import axios from 'axios';
+import { CommandBarStepEnum } from '../../types/general';
+import { CommandBarContext } from '../../context/commandBarContext';
+import { syncRepo } from '../../services/api';
+import Header from '../Header';
+import Footer from '../Footer';
+
+type Props = {};
+
+const PublicRepos = ({}: Props) => {
+ const { t } = useTranslation();
+ const { setChosenStep, setFocusedItem } = useContext(
+ CommandBarContext.Handlers,
+ );
+ const [inputValue, setInputValue] = useState('');
+
+ const handleInputChange = useCallback((e: ChangeEvent
+
+ );
+};
+
+export default memo(PublicRepos);
diff --git a/client/src/CommandBar/steps/ToggleTheme.tsx b/client/src/CommandBar/steps/ToggleTheme.tsx
new file mode 100644
index 0000000000..5652357fb1
--- /dev/null
+++ b/client/src/CommandBar/steps/ToggleTheme.tsx
@@ -0,0 +1,75 @@
+import { memo, useCallback, useContext, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+ CommandBarItemGeneralType,
+ CommandBarStepEnum,
+} from '../../types/general';
+import {
+ MacintoshIcon,
+ ThemeBlackIcon,
+ ThemeDarkIcon,
+ ThemeLightIcon,
+} from '../../icons';
+import Header from '../Header';
+import Body from '../Body';
+import Footer from '../Footer';
+import { CommandBarContext } from '../../context/commandBarContext';
+import { Theme } from '../../types';
+import { UIContext } from '../../context/uiContext';
+
+type Props = {};
+
+const ToggleTheme = ({}: Props) => {
+ const { t } = useTranslation();
+ const { setChosenStep } = useContext(CommandBarContext.Handlers);
+ const { setTheme } = useContext(UIContext.Theme);
+
+ const handleBack = useCallback(() => {
+ setChosenStep({ id: CommandBarStepEnum.INITIAL });
+ }, []);
+
+ const initialSections = useMemo(() => {
+ const themeOptions = ['light', 'dark', 'black', 'system'] as Theme[];
+ const themeMap = {
+ light: ThemeLightIcon,
+ dark: ThemeDarkIcon,
+ black: ThemeBlackIcon,
+ system: MacintoshIcon,
+ };
+ const themeItems: CommandBarItemGeneralType[] = themeOptions.map((th) => ({
+ label: t(`Use ${th} theme`),
+ Icon: themeMap[th],
+ id: `${th}-theme`,
+ key: `${th}-theme`,
+ onClick: () => setTheme(th),
+ footerHint: t(`Use ${th} theme`),
+ footerBtns: [
+ {
+ label: t('Toggle'),
+ shortcut: ['entr'],
+ },
+ ],
+ }));
+ return [
+ {
+ items: themeItems,
+ itemsOffset: 0,
+ key: 'theme-commands',
+ },
+ ];
+ }, [t]);
+
+ return (
+
+
+
+
+ );
+};
+
+export default memo(ToggleTheme);
diff --git a/client/src/CommandBar/steps/items/DocItem.tsx b/client/src/CommandBar/steps/items/DocItem.tsx
new file mode 100644
index 0000000000..f7256ade84
--- /dev/null
+++ b/client/src/CommandBar/steps/items/DocItem.tsx
@@ -0,0 +1,209 @@
+import {
+ Dispatch,
+ memo,
+ SetStateAction,
+ useCallback,
+ useContext,
+ useEffect,
+ useMemo,
+ useRef,
+ useState,
+} from 'react';
+import { Trans, useTranslation } from 'react-i18next';
+import { format } from 'date-fns';
+import { LinkChainIcon, RepositoryIcon } from '../../../icons';
+import { DeviceContext } from '../../../context/deviceContext';
+import { getDateFnsLocale } from '../../../utils';
+import { LocaleContext } from '../../../context/localeContext';
+import { DocShortType } from '../../../types/api';
+import { deleteDocProvider, getIndexedDocs } from '../../../services/api';
+import Item from '../../Body/Item';
+import SpinLoaderContainer from '../../../components/Loaders/SpinnerLoader';
+import Button from '../../../components/Button';
+
+type Props = {
+ doc: DocShortType;
+ i: number;
+ isFocused: boolean;
+ setFocusedIndex: Dispatch{t('Indexing...')}
+ ) : undefined + } + /> + ); +}; + +export default memo(DocItem); diff --git a/client/src/CommandBar/steps/items/RepoItem.tsx b/client/src/CommandBar/steps/items/RepoItem.tsx new file mode 100644 index 0000000000..36b21de252 --- /dev/null +++ b/client/src/CommandBar/steps/items/RepoItem.tsx @@ -0,0 +1,360 @@ +import { + Dispatch, + memo, + SetStateAction, + useCallback, + useContext, + useEffect, + useMemo, + useRef, + useState, +} from 'react'; +import { useTranslation } from 'react-i18next'; +import { + CommandBarStepEnum, + RepoProvider, + RepoUi, + SyncStatus, +} from '../../../types/general'; +import { + addRepoToProject, + cancelSync, + deleteRepo, + removeRepoFromProject, + syncRepo, +} from '../../../services/api'; +import { + CloseSignInCircleIcon, + LinkChainIcon, + PlusSignIcon, + RepositoryIcon, + TrashCanIcon, +} from '../../../icons'; +import { DeviceContext } from '../../../context/deviceContext'; +import { getFileManagerName } from '../../../utils'; +import Item from '../../Body/Item'; +import SpinLoaderContainer from '../../../components/Loaders/SpinnerLoader'; +import { ProjectContext } from '../../../context/projectContext'; +import { repoStatusMap } from '../../../consts/general'; + +type Props = { + repo: RepoUi; + i: number; + isFocused: boolean; + setFocusedIndex: Dispatch{description}
+ {description}
);
};
diff --git a/client/src/pages/Onboarding/Desktop/FeaturesStep/index.tsx b/client/src/Onboarding/Desktop/FeaturesStep/index.tsx
similarity index 66%
rename from client/src/pages/Onboarding/Desktop/FeaturesStep/index.tsx
rename to client/src/Onboarding/Desktop/FeaturesStep/index.tsx
index cb4a73e16c..604e5fa0cc 100644
--- a/client/src/pages/Onboarding/Desktop/FeaturesStep/index.tsx
+++ b/client/src/Onboarding/Desktop/FeaturesStep/index.tsx
@@ -1,17 +1,14 @@
import React, { useCallback } from 'react';
import { Trans, useTranslation } from 'react-i18next';
-import Button from '../../../../components/Button';
-import { ChatBubble, PointClick, CodeStudioIcon } from '../../../../icons';
-import DialogText from '../../../../components/SeparateOnboardingStep/DialogText';
-import GoBackButton from '../../../HomeTab/AddRepos/GoBackButton';
+import Button from '../../../components/Button';
+import { ChatBubblesIcon, CodeStudioIcon } from '../../../icons';
import Feature from './Feature';
type Props = {
handleNext: (e?: any) => void;
- handleBack?: (e?: any) => void;
};
-const FeaturesStep = ({ handleNext, handleBack }: Props) => {
+const FeaturesStep = ({ handleNext }: Props) => {
const { t } = useTranslation();
const handleSubmit = useCallback(
(e: React.MouseEvent
+
+ {t('Welcome to bloop')} +
++ {t('Unlock the value of your existing code, using AI')} +
+
+
+
+
+
+ Select color theme:
+
- Select color theme:
-
- }
- btnClassName="w-full border-transparent"
- items={Object.entries(themesMap).map(([key, name]) => ({
- type: MenuItemType.DEFAULT,
- text: t(name),
- onClick: () => setTheme(key as Theme),
- onMouseOver: () => previewTheme(key),
- }))}
- onClose={() => previewTheme(theme)}
- selected={{
- type: MenuItemType.DEFAULT,
- text: t(themesMap[theme]),
- }}
- />
+ DropdownComponent={ThemeDropdown}
+ size="small"
+ dropdownPlacement="bottom-end"
+ >
+
+
)}
-
@@ -40,14 +54,14 @@ const UserForm = ({ form, setForm, onContinue }: Props) => {
Setup bloop
{envConfig.credentials_upgrade && (
-
+
+
{step === 0 ? (
- (null);
+
+ const [conversation, setConversation] = useState([]);
+ useEffect(() => {
+ setChats((prev) => {
+ return { ...prev, [tabKey]: { ...prev[tabKey], conversation } };
+ });
+ }, [conversation]);
+
+ const [selectedLines, setSelectedLines] = useState<[number, number] | null>(
+ null,
+ );
+ useEffect(() => {
+ setChats((prev) => {
+ return { ...prev, [tabKey]: { ...prev[tabKey], selectedLines } };
+ });
+ }, [selectedLines]);
+
+ const [inputValue, setInputValue] = useState({
+ plain: '',
+ parsed: [],
+ });
+ useEffect(() => {
+ setChats((prev) => {
+ return { ...prev, [tabKey]: { ...prev[tabKey], inputValue } };
+ });
+ }, [inputValue]);
+
+ const [submittedQuery, setSubmittedQuery] = useState<
+ InputValueType & { options?: Options }
+ >(
+ initialQuery
+ ? {
+ parsed: [
+ {
+ type: ParsedQueryTypeEnum.TEXT,
+ text: `#explain_${initialQuery.path}:${initialQuery.lines.join(
+ '-',
+ )}-${Date.now()}`,
+ },
+ ],
+ plain: `#explain_${initialQuery.path}:${initialQuery.lines.join(
+ '-',
+ )}-${Date.now()}`,
+ options: initialQuery,
+ }
+ : {
+ parsed: [],
+ plain: '',
+ },
+ );
+ useEffect(() => {
+ setChats((prev) => {
+ return { ...prev, [tabKey]: { ...prev[tabKey], submittedQuery } };
+ });
+ }, [submittedQuery]);
+
+ const [isLoading, setLoading] = useState(false);
+ useEffect(() => {
+ setChats((prev) => {
+ return { ...prev, [tabKey]: { ...prev[tabKey], isLoading } };
+ });
+ }, [isLoading]);
+
+ const [isDeprecatedModalOpen, setDeprecatedModalOpen] = useState(false);
+ useEffect(() => {
+ setChats((prev) => {
+ return { ...prev, [tabKey]: { ...prev[tabKey], isDeprecatedModalOpen } };
+ });
+ }, [isDeprecatedModalOpen]);
+
+ const [hideMessagesFrom, setHideMessagesFrom] = useState(null);
+ useEffect(() => {
+ setChats((prev) => {
+ return { ...prev, [tabKey]: { ...prev[tabKey], hideMessagesFrom } };
+ });
+ }, [hideMessagesFrom]);
+
+ const [queryIdToEdit, setQueryIdToEdit] = useState('');
+ useEffect(() => {
+ setChats((prev) => {
+ return { ...prev, [tabKey]: { ...prev[tabKey], queryIdToEdit } };
+ });
+ }, [queryIdToEdit]);
+
+ const [inputImperativeValue, setInputImperativeValue] = useState | null>(null);
+ useEffect(() => {
+ setChats((prev) => {
+ return { ...prev, [tabKey]: { ...prev[tabKey], inputImperativeValue } };
+ });
+ }, [inputImperativeValue]);
+
+ const [threadId, setThreadId] = useState('');
+ useEffect(() => {
+ setChats((prev) => {
+ return { ...prev, [tabKey]: { ...prev[tabKey], threadId } };
+ });
+ }, [threadId]);
+
+ const [conversationId, setConversationId] = useState('');
+ useEffect(() => {
+ setChats((prev) => {
+ return { ...prev, [tabKey]: { ...prev[tabKey], conversationId } };
+ });
+ }, [conversationId]);
+
+ const closeDeprecatedModal = useCallback(() => {
+ setDeprecatedModalOpen(false);
+ }, []);
+
+ useEffect(() => {
+ setChats((prev) => {
+ return {
+ ...prev,
+ [tabKey]: {
+ ...prev[tabKey],
+ setConversation,
+ setInputValue,
+ setSelectedLines,
+ setSubmittedQuery,
+ setThreadId,
+ closeDeprecatedModal,
+ },
+ };
+ });
+ }, []);
+
+ const setInputValueImperatively = useCallback(
+ (value: ParsedQueryType[] | string) => {
+ setInputImperativeValue({
+ type: 'paragraph',
+ content:
+ typeof value === 'string'
+ ? [
+ {
+ type: 'text',
+ text: value,
+ },
+ ]
+ : value
+ .filter((pq) =>
+ ['path', 'lang', 'text', 'repo'].includes(pq.type),
+ )
+ .map((pq) =>
+ pq.type === 'text'
+ ? { type: 'text', text: pq.text }
+ : {
+ type: 'mention',
+ attrs: {
+ id: pq.text,
+ display: pq.text,
+ type: pq.type,
+ isFirst: false,
+ },
+ },
+ ),
+ });
+ focusInput();
+ },
+ [],
+ );
+ useEffect(() => {
+ setChats((prev) => {
+ return {
+ ...prev,
+ [tabKey]: { ...prev[tabKey], setInputValueImperatively },
+ };
+ });
+ }, [setInputValueImperatively]);
+
+ const makeSearch = useCallback(
+ (query: string, options?: Options) => {
+ if (!query) {
+ return;
+ }
+ prevEventSource.current?.close();
+ setInputValue({ plain: '', parsed: [] });
+ setInputImperativeValue(null);
+ setLoading(true);
+ setQueryIdToEdit('');
+ setHideMessagesFrom(null);
+ const url = `${apiUrl}/projects/${project?.id}/answer${
+ options ? `/explain` : ``
+ }`;
+ const queryParams: Record = {
+ model:
+ preferredAnswerSpeed === 'normal'
+ ? 'gpt-4'
+ : 'gpt-3.5-turbo-finetuned',
+ };
+ if (conversationId) {
+ queryParams.conversation_id = conversationId;
+ if (queryIdToEdit) {
+ queryParams.parent_query_id = queryIdToEdit;
+ }
+ }
+ if (options) {
+ queryParams.relative_path = options.path;
+ queryParams.repo_ref = options.repoRef;
+ if (options.branch) {
+ queryParams.branch = options.branch;
+ }
+ queryParams.line_start = options.lines[0].toString();
+ queryParams.line_end = options.lines[1].toString();
+ } else {
+ queryParams.q = query;
+ }
+ const fullUrl = url + '?' + new URLSearchParams(queryParams).toString();
+ console.log(fullUrl);
+ const eventSource = new EventSource(fullUrl);
+ prevEventSource.current = eventSource;
+ setSelectedLines(null);
+ let firstResultCame: boolean;
+ eventSource.onerror = (err) => {
+ console.log('SSE error', err);
+ firstResultCame = false;
+ stopGenerating();
+ setConversation((prev) => {
+ const newConversation = prev.slice(0, -1);
+ const lastMessage: ChatMessage = {
+ author: ChatMessageAuthor.Server,
+ isLoading: false,
+ error: t(
+ "We couldn't answer your question. You can try asking again in a few moments, or rephrasing your question.",
+ ),
+ loadingSteps: [],
+ queryId: '',
+ responseTimestamp: new Date().toISOString(),
+ };
+ if (!options) {
+ // setInputValue(prev[prev.length - 2]?.text || submittedQuery);
+ setInputValueImperatively(
+ (prev[prev.length - 2] as ChatMessageUser)?.parsedQuery ||
+ prev[prev.length - 2]?.text ||
+ submittedQuery.parsed,
+ );
+ }
+ setSubmittedQuery({ plain: '', parsed: [] });
+ return [...newConversation, lastMessage];
+ });
+ };
+ let conversation_id = '';
+ setConversation((prev) => [
+ ...prev,
+ {
+ author: ChatMessageAuthor.Server,
+ isLoading: true,
+ loadingSteps: [],
+ text: '',
+ conclusion: '',
+ queryId: '',
+ responseTimestamp: '',
+ },
+ ]);
+ eventSource.onmessage = (ev) => {
+ console.log(ev.data);
+ if (
+ ev.data === '{"Err":"incompatible client"}' ||
+ ev.data === '{"Err":"failed to check compatibility"}'
+ ) {
+ eventSource.close();
+ prevEventSource.current?.close();
+ if (ev.data === '{"Err":"incompatible client"}') {
+ setDeprecatedModalOpen(true);
+ } else {
+ setConversation((prev) => {
+ const newConversation = prev.slice(0, -1);
+ const lastMessage: ChatMessage = {
+ author: ChatMessageAuthor.Server,
+ isLoading: false,
+ error: t(
+ "We couldn't answer your question. You can try asking again in a few moments, or rephrasing your question.",
+ ),
+ loadingSteps: [],
+ queryId: '',
+ responseTimestamp: new Date().toISOString(),
+ };
+ if (!options) {
+ // setInputValue(prev[prev.length - 1]?.text || submittedQuery);
+ setInputValueImperatively(
+ (prev[prev.length - 1] as ChatMessageUser)?.parsedQuery ||
+ prev[prev.length - 2]?.text ||
+ submittedQuery.parsed,
+ );
+ }
+ setSubmittedQuery({ plain: '', parsed: [] });
+ return [...newConversation, lastMessage];
+ });
+ }
+ setLoading(false);
+ return;
+ }
+ try {
+ const data = JSON.parse(ev.data);
+ if (data.Ok.ChatEvent) {
+ const newMessage = data.Ok.ChatEvent;
+ conversationsCache[conversation_id] = undefined; // clear cache on new answer
+ setConversation((prev) => {
+ const newConversation = prev?.slice(0, -1) || [];
+ const lastMessage = prev?.slice(-1)[0];
+ const messageToAdd = {
+ author: ChatMessageAuthor.Server,
+ isLoading: true,
+ loadingSteps: mapLoadingSteps(newMessage.search_steps, t),
+ text: newMessage.answer,
+ conclusion: newMessage.conclusion,
+ queryId: newMessage.id,
+ responseTimestamp: newMessage.response_timestamp,
+ explainedFile: newMessage.focused_chunk?.repo_path,
+ };
+ const lastMessages: ChatMessage[] =
+ lastMessage?.author === ChatMessageAuthor.Server
+ ? [messageToAdd]
+ : [...prev.slice(-1), messageToAdd];
+ return [...newConversation, ...lastMessages];
+ });
+ // workaround: sometimes we get [^summary]: before it is removed from response
+ if (newMessage.answer?.length > 11 && !firstResultCame) {
+ if (newMessage.focused_chunk?.repo_path) {
+ openNewTab(
+ {
+ type: TabTypesEnum.FILE,
+ path: newMessage.focused_chunk.repo_path.path,
+ repoRef: newMessage.focused_chunk.repo_path.repo,
+ scrollToLine:
+ newMessage.focused_chunk.start_line > -1
+ ? `${newMessage.focused_chunk.start_line}_${newMessage.focused_chunk.end_line}`
+ : undefined,
+ },
+ side === 'left' ? 'right' : 'left',
+ );
+ }
+ firstResultCame = true;
+ }
+ } else if (data.Ok.StreamEnd) {
+ const message = data.Ok.StreamEnd;
+ conversation_id = message.conversation_id;
+ setThreadId(message.thread_id);
+ setConversationId(message.conversation_id);
+ if (conversation.length < 2) {
+ updateTabProperty(
+ tabKey,
+ 'conversationId',
+ message.conversation_id,
+ side,
+ );
+ }
+ eventSource.close();
+ prevEventSource.current = null;
+ setLoading(false);
+ setConversation((prev) => {
+ const newConversation = prev.slice(0, -1);
+ const lastMessage = {
+ ...prev.slice(-1)[0],
+ isLoading: false,
+ };
+ return [...newConversation, lastMessage];
+ });
+ refreshCurrentProjectConversations();
+ setTimeout(() => focusInput(), 100);
+ return;
+ } else if (data.Err) {
+ setConversation((prev) => {
+ const lastMessageIsServer =
+ prev[prev.length - 1].author === ChatMessageAuthor.Server;
+ const newConversation = prev.slice(
+ 0,
+ lastMessageIsServer ? -2 : -1,
+ );
+ const lastMessage: ChatMessageServer = {
+ ...(lastMessageIsServer
+ ? (prev.slice(-1)[0] as ChatMessageServer)
+ : {
+ author: ChatMessageAuthor.Server,
+ loadingSteps: [],
+ queryId: '',
+ responseTimestamp: new Date().toISOString(),
+ }),
+ isLoading: false,
+ error:
+ data.Err === 'request failed 5 times'
+ ? t(
+ 'Failed to get a response from OpenAI. Try again in a few moments.',
+ )
+ : t(
+ "We couldn't answer your question. You can try asking again in a few moments, or rephrasing your question.",
+ ),
+ };
+ if (!options) {
+ setInputValueImperatively(
+ (
+ prev[
+ prev.length - (lastMessageIsServer ? 2 : 1)
+ ] as ChatMessageUser
+ )?.parsedQuery ||
+ prev[prev.length - 2]?.text ||
+ submittedQuery.parsed,
+ );
+ }
+ setSubmittedQuery({ plain: '', parsed: [] });
+ return [...newConversation, lastMessage];
+ });
+ }
+ } catch (err) {
+ console.log('failed to parse response', err);
+ }
+ };
+ return () => {
+ eventSource.close();
+ };
+ },
+ [conversationId, t, queryIdToEdit, preferredAnswerSpeed, openNewTab, side],
+ );
+
+ useEffect(() => {
+ if (!submittedQuery.plain) {
+ return;
+ }
+ let userQuery = submittedQuery.plain;
+ let userQueryParsed = submittedQuery.parsed;
+ const options = submittedQuery.options;
+ if (submittedQuery.plain.startsWith('#explain_')) {
+ const [prefix, ending] = submittedQuery.plain.split(':');
+ const [lineStart, lineEnd] = ending.split('-');
+ const filePath = prefix.slice(9);
+ userQuery = t(
+ `Explain the purpose of the file {{filePath}}, from lines {{lineStart}} - {{lineEnd}}`,
+ {
+ lineStart: Number(lineStart) + 1,
+ lineEnd: Number(lineEnd) + 1,
+ filePath,
+ },
+ );
+ userQueryParsed = [{ type: ParsedQueryTypeEnum.TEXT, text: userQuery }];
+ }
+ setConversation((prev) => {
+ return prev.length === 1 && submittedQuery.options
+ ? prev
+ : [
+ ...prev,
+ {
+ author: ChatMessageAuthor.User,
+ text: userQuery,
+ parsedQuery: userQueryParsed,
+ isLoading: false,
+ },
+ ];
+ });
+ makeSearch(userQuery, options);
+ }, [submittedQuery]);
+
+ useEffect(() => {
+ if (conversation.length && conversation.length < 3 && !tabTitle) {
+ console.log('updateTabProperty');
+ updateTabProperty(
+ tabKey,
+ 'title',
+ conversation[0].text,
+ side,
+ );
+ }
+ }, [conversation, tabKey, side, tabTitle]);
+
+ const stopGenerating = useCallback(() => {
+ prevEventSource.current?.close();
+ setLoading(false);
+ setConversation((prev) => {
+ const newConversation = prev.slice(0, -1);
+ const lastMessage = {
+ ...prev.slice(-1)[0],
+ isLoading: false,
+ };
+ return [...newConversation, lastMessage];
+ });
+ setTimeout(focusInput, 100);
+ }, []);
+ useEffect(() => {
+ setChats((prev) => {
+ return { ...prev, [tabKey]: { ...prev[tabKey], stopGenerating } };
+ });
+ }, [stopGenerating]);
+
+ const onMessageEdit = useCallback(
+ (parentQueryId: string, i: number) => {
+ setQueryIdToEdit(parentQueryId);
+ if (isLoading) {
+ stopGenerating();
+ }
+ setHideMessagesFrom(i);
+ const mes = conversation[i] as ChatMessageUser;
+ setInputValueImperatively(mes.parsedQuery || mes.text!);
+ },
+ [isLoading, conversation],
+ );
+ useEffect(() => {
+ setChats((prev) => {
+ return { ...prev, [tabKey]: { ...prev[tabKey], onMessageEdit } };
+ });
+ }, [onMessageEdit]);
+
+ const onMessageEditCancel = useCallback(() => {
+ setQueryIdToEdit('');
+ setInputValue({ plain: '', parsed: [] });
+ setInputImperativeValue(null);
+ setHideMessagesFrom(null);
+ }, []);
+ useEffect(() => {
+ setChats((prev) => {
+ return { ...prev, [tabKey]: { ...prev[tabKey], onMessageEditCancel } };
+ });
+ }, [onMessageEditCancel]);
+
+ useEffect(() => {
+ // if it was open from history and not updated from sse message
+ if (convId && project?.id && !conversation.length) {
+ getConversation(project.id, convId).then((resp) => {
+ const conv: ChatMessage[] = [];
+ let hasOpenedTab = false;
+ resp.exchanges.forEach((m) => {
+ // @ts-ignore
+ const userQuery = m.search_steps.find((s) => s.type === 'QUERY');
+ const parsedQuery = mapUserQuery(m);
+ conv.push({
+ author: ChatMessageAuthor.User,
+ text: m.query.raw_query || userQuery?.content?.query || '',
+ parsedQuery,
+ isFromHistory: true,
+ });
+ conv.push({
+ author: ChatMessageAuthor.Server,
+ isLoading: false,
+ loadingSteps: mapLoadingSteps(m.search_steps, t),
+ text: m.answer,
+ conclusion: m.conclusion,
+ queryId: m.id,
+ responseTimestamp: m.response_timestamp,
+ explainedFile: m.focused_chunk?.repo_path.path,
+ });
+ if (!hasOpenedTab && m.focused_chunk?.repo_path) {
+ openNewTab(
+ {
+ type: TabTypesEnum.FILE,
+ path: m.focused_chunk.repo_path.path,
+ repoRef: m.focused_chunk.repo_path.repo,
+ scrollToLine:
+ m.focused_chunk.start_line > -1
+ ? `${m.focused_chunk.start_line}_${m.focused_chunk.end_line}`
+ : undefined,
+ },
+ side === 'left' ? 'right' : 'left',
+ );
+ hasOpenedTab = true;
+ }
+ });
+ setConversation(conv);
+ setThreadId(resp.thread_id);
+ setConversationId(convId);
+ });
+ }
+ }, [convId, project?.id]);
+
+ return null;
+};
+
+export default memo(ChatPersistentState);
diff --git a/client/src/Project/CurrentTabContent/ChatTab/Conversation.tsx b/client/src/Project/CurrentTabContent/ChatTab/Conversation.tsx
new file mode 100644
index 0000000000..38d921d2c7
--- /dev/null
+++ b/client/src/Project/CurrentTabContent/ChatTab/Conversation.tsx
@@ -0,0 +1,68 @@
+import React, { memo, useContext, useMemo } from 'react';
+import ScrollToBottom from 'react-scroll-to-bottom';
+import { ChatMessageServer } from '../../../types/general';
+import { ProjectContext } from '../../../context/projectContext';
+import { ChatContext, ChatsContext } from '../../../context/chatsContext';
+import Input from './Input';
+import ScrollableContent from './ScrollableContent';
+import DeprecatedClientModal from './DeprecatedClientModal';
+
+type Props = {
+ side: 'left' | 'right';
+ tabKey: string;
+};
+
+const Conversation = ({ side, tabKey }: Props) => {
+ const { project } = useContext(ProjectContext.Current);
+ const { chats } = useContext(ChatsContext);
+
+ const chatData: ChatContext | undefined = useMemo(
+ () => chats[tabKey],
+ [chats, tabKey],
+ );
+
+ return !chatData ? null : (
+
+
+ );
+};
+
+export default DeprecatedClientModal;
diff --git a/client/src/Project/CurrentTabContent/ChatTab/Input/InputCore.tsx b/client/src/Project/CurrentTabContent/ChatTab/Input/InputCore.tsx
new file mode 100644
index 0000000000..0a3ee0e196
--- /dev/null
+++ b/client/src/Project/CurrentTabContent/ChatTab/Input/InputCore.tsx
@@ -0,0 +1,211 @@
+import { memo, useCallback, useEffect, useMemo, useState } from 'react';
+import { EditorState, Transaction } from 'prosemirror-state';
+import { Schema } from 'prosemirror-model';
+import { keymap } from 'prosemirror-keymap';
+import { baseKeymap } from 'prosemirror-commands';
+import {
+ NodeViewComponentProps,
+ ProseMirror,
+ react,
+ ReactNodeViewConstructor,
+ useNodeViews,
+} from '@nytimes/react-prosemirror';
+import { schema as basicSchema } from 'prosemirror-schema-basic';
+import * as icons from 'file-icons-js';
+import { useTranslation } from 'react-i18next';
+import { InputEditorContent, ParsedQueryType } from '../../../../types/general';
+import { getFileExtensionForLang } from '../../../../utils';
+import { blurInput } from '../../../../utils/domUtils';
+import { getMentionsPlugin } from './mentionPlugin';
+import { addMentionNodes, mapEditorContentToInputValue } from './utils';
+import { placeholderPlugin } from './placeholderPlugin';
+
+const schema = new Schema({
+ nodes: addMentionNodes(basicSchema.spec.nodes),
+ marks: basicSchema.spec.marks,
+});
+
+function Paragraph({ children }: NodeViewComponentProps) {
+ return = {
+ paragraph: () => ({
+ component: Paragraph,
+ dom: document.createElement('div'),
+ contentDOM: document.createElement('span'),
+ }),
+};
+
+type Props = {
+ getDataLang: (search: string) => Promise<{ id: string; display: string }[]>;
+ getDataPath: (search: string) => Promise<{ id: string; display: string }[]>;
+ getDataRepo: (search: string) => Promise<{ id: string; display: string }[]>;
+ initialValue?: Record | null;
+ onChange: (contents: InputEditorContent[]) => void;
+ onSubmit?: (s: { parsed: ParsedQueryType[]; plain: string }) => void;
+ placeholder: string;
+};
+
+const InputCore = ({
+ getDataLang,
+ getDataPath,
+ getDataRepo,
+ initialValue,
+ onChange,
+ onSubmit,
+ placeholder,
+}: Props) => {
+ const { t } = useTranslation();
+ const mentionPlugin = useMemo(
+ () =>
+ getMentionsPlugin({
+ delay: 10,
+ getSuggestions: async (
+ type: string,
+ text: string,
+ done: (s: Record[]) => void,
+ ) => {
+ const data = await Promise.all([
+ getDataRepo(text),
+ getDataPath(text),
+ getDataLang(text),
+ ]);
+ done([...data[0], ...data[1], ...data[2]]);
+ },
+ getSuggestionsHTML: (items) => {
+ return (
+ '(null);
+ const [state, setState] = useState(
+ EditorState.create({
+ doc: initialValue
+ ? schema.topNodeType.create(null, [schema.nodeFromJSON(initialValue)])
+ : undefined,
+ schema,
+ plugins,
+ }),
+ );
+
+ useEffect(() => {
+ if (mount) {
+ setState(
+ EditorState.create({
+ schema,
+ plugins,
+ doc: initialValue
+ ? schema.topNodeType.create(null, [
+ schema.nodeFromJSON(initialValue),
+ ])
+ : undefined,
+ }),
+ );
+ }
+ }, [mount, initialValue, plugins]);
+
+ const dispatchTransaction = useCallback(
+ (tr: Transaction) => setState((oldState) => oldState.apply(tr)),
+ [],
+ );
+
+ useEffect(() => {
+ const newValue = state.toJSON().doc.content[0]?.content;
+ onChange(newValue || []);
+ }, [state]);
+
+ return (
+ | null;
+ generationInProgress?: boolean;
+ isStoppable?: boolean;
+ onStop?: () => void;
+ setInputValue: Dispatch<
+ SetStateAction<{ parsed: ParsedQueryType[]; plain: string }>
+ >;
+ selectedLines?: [number, number] | null;
+ setSelectedLines?: (l: [number, number] | null) => void;
+ queryIdToEdit?: string;
+ onMessageEditCancel?: () => void;
+ conversation: ChatMessage[];
+ hideMessagesFrom: number | null;
+ setConversation: Dispatch>;
+ setSubmittedQuery: Dispatch<
+ SetStateAction<{ parsed: ParsedQueryType[]; plain: string }>
+ >;
+ submittedQuery: { parsed: ParsedQueryType[]; plain: string };
+};
+
+type SuggestionType = {
+ id: string;
+ display: string;
+ type: 'file' | 'dir' | 'lang' | 'repo';
+ isFirst: boolean;
+};
+
+const ConversationInput = ({
+ value,
+ valueToEdit,
+ setInputValue,
+ generationInProgress,
+ isStoppable,
+ onStop,
+ selectedLines,
+ setSelectedLines,
+ queryIdToEdit,
+ onMessageEditCancel,
+ conversation,
+ hideMessagesFrom,
+ setConversation,
+ setSubmittedQuery,
+ submittedQuery,
+}: Props) => {
+ const { t } = useTranslation();
+ const { envConfig } = useContext(EnvContext);
+ const [isInputAtBottom, setIsInputAtBottom] = useState(false);
+ const [initialValue, setInitialValue] = useState<
+ Record | null | undefined
+ >({
+ type: 'paragraph',
+ content: value?.parsed
+ .filter((pq) => ['path', 'lang', 'text'].includes(pq.type))
+ .map((pq) =>
+ pq.type === 'text'
+ ? { type: 'text', text: pq.text }
+ : {
+ type: 'mention',
+ attrs: {
+ id: pq.text,
+ display: pq.text,
+ type: pq.type,
+ isFirst: false,
+ },
+ },
+ ),
+ });
+ const [hasRendered, setHasRendered] = useState(false);
+ const containerRef = useRef(null);
+
+ useEffect(() => {
+ setHasRendered(true);
+ setTimeout(focusInput, 500);
+ }, []);
+
+ useEffect(() => {
+ if (hasRendered) {
+ setInitialValue(valueToEdit);
+ }
+ }, [valueToEdit]);
+
+ // useEffect(() => {
+ // if (containerRef.current) {
+ // setIsInputAtBottom(containerRef.current)
+ // }
+ // }, [conversation]);
+
+ const onSubmit = useCallback(
+ (value: { parsed: ParsedQueryType[]; plain: string }) => {
+ if (
+ (conversation[conversation.length - 1] as ChatMessageServer)
+ ?.isLoading ||
+ !value.plain.trim()
+ ) {
+ return;
+ }
+ if (hideMessagesFrom !== null) {
+ setConversation((prev) => prev.slice(0, hideMessagesFrom));
+ }
+ setSubmittedQuery(value);
+ },
+ [conversation, submittedQuery, hideMessagesFrom],
+ );
+
+ const onChangeInput = useCallback((inputState: InputEditorContent[]) => {
+ setInputValue(mapEditorContentToInputValue(inputState));
+ }, []);
+
+ const onSubmitButtonClicked = useCallback(() => {
+ if (value && onSubmit) {
+ onSubmit(value);
+ }
+ }, [value, onSubmit]);
+ const getDataPath = useCallback(async (search: string) => {
+ const respPath = await getAutocomplete(`path:${search}&content=false`);
+ const fileResults = respPath.data.filter(
+ (d): d is FileResItem => d.kind === 'file_result',
+ );
+ const dirResults = fileResults
+ .filter((d) => d.data.is_dir)
+ .map((d) => d.data.relative_path.text);
+ const filesResults = fileResults
+ .filter((d) => !d.data.is_dir)
+ .map((d) => d.data.relative_path.text);
+ const results: SuggestionType[] = [];
+ filesResults.forEach((fr, i) => {
+ results.push({ id: fr, display: fr, type: 'file', isFirst: i === 0 });
+ });
+ dirResults.forEach((fr, i) => {
+ results.push({ id: fr, display: fr, type: 'dir', isFirst: i === 0 });
+ });
+ return results;
+ }, []);
+
+ const getDataLang = useCallback(
+ async (
+ search: string,
+ // callback: (a: { id: string; display: string }[]) => void,
+ ) => {
+ const respLang = await getAutocomplete(`lang:${search}&content=false`);
+ const langResults = respLang.data
+ .filter((d): d is LangItem => d.kind === 'lang')
+ .map((d) => d.data);
+ const results: SuggestionType[] = [];
+ langResults.forEach((fr, i) => {
+ results.push({ id: fr, display: fr, type: 'lang', isFirst: i === 0 });
+ });
+ return results;
+ },
+ [],
+ );
+
+ const getDataRepo = useCallback(
+ async (
+ search: string,
+ // callback: (a: { id: string; display: string }[]) => void,
+ ) => {
+ const respRepo = await getAutocomplete(
+ `repo:${search}&content=false&path=false&file=false`,
+ );
+ const repoResults = respRepo.data
+ .filter((d): d is RepoItem => d.kind === 'repository_result')
+ .map((d) => d.data);
+ const results: SuggestionType[] = [];
+ repoResults.forEach((rr, i) => {
+ results.push({
+ id: rr.name.text,
+ display: rr.name.text.replace('github.com/', ''),
+ type: 'repo',
+ isFirst: i === 0,
+ });
+ });
+ return results;
+ },
+ [],
+ );
+
+ const handleKeyEvent = useCallback(
+ (e: KeyboardEvent) => {
+ if (
+ e.key === 'Escape' &&
+ ((onMessageEditCancel && queryIdToEdit) || (isStoppable && onStop))
+ ) {
+ e.preventDefault();
+ e.stopPropagation();
+ onMessageEditCancel?.();
+ onStop?.();
+ }
+ },
+ [onMessageEditCancel, isStoppable, onStop],
+ );
+ useKeyboardNavigation(handleKeyEvent, !queryIdToEdit && !isStoppable);
+
+ return (
+ [];
+ index: number;
+};
+
+const getNewState = function () {
+ return {
+ active: false,
+ range: {
+ from: 0,
+ to: 0,
+ },
+ type: '',
+ text: '',
+ suggestions: [],
+ index: 0, // current active suggestion index
+ };
+};
+
+type Options = {
+ mentionTrigger: string;
+ allowSpace?: boolean;
+ activeClass: string;
+ suggestionTextClass?: string;
+ getSuggestions: (
+ type: string,
+ text: string,
+ done: (s: Record[]) => void,
+ ) => void;
+ delay: number;
+ getSuggestionsHTML: (items: Record[], type: string) => string;
+};
+
+export function getMentionsPlugin(opts: Partial) {
+ // default options
+ const defaultOpts = {
+ mentionTrigger: '@',
+ allowSpace: false,
+ getSuggestions: (
+ type: string,
+ text: string,
+ cb: (s: { name: string }[]) => void,
+ ) => {
+ cb([]);
+ },
+ getSuggestionsHTML: (items: { name: string }[]) =>
+ '[],
+ opts: Options,
+ ) {
+ try {
+ el.innerHTML = opts.getSuggestionsHTML(suggestions, state.type);
+
+ // attach new item event handlers
+ el.querySelectorAll('.suggestion-item').forEach(
+ function (itemNode, index) {
+ itemNode.addEventListener('click', function () {
+ select(view, state, opts);
+ view.focus();
+ });
+ // TODO: setIndex() needlessly queries.
+ // We already have the itemNode. SHOULD OPTIMIZE.
+ itemNode.addEventListener('mouseover', function () {
+ setIndex(index, state, opts);
+ });
+ itemNode.addEventListener('mouseout', function () {
+ setIndex(index, state, opts);
+ });
+ },
+ );
+
+ // highlight first element by default - like Facebook.
+ addClassAtIndex(state.index, opts.activeClass);
+
+ // TODO: knock off domAtPos usage. It's not documented and is not officially a public API.
+ // It's used currently, only to optimize the the query for textDOM
+ const node = view.domAtPos(view.state.selection.$from.pos);
+ const paraDOM = node.node;
+ const textDOM = (paraDOM as HTMLElement).querySelector(
+ '.' + opts.suggestionTextClass,
+ );
+
+ const offset = textDOM?.getBoundingClientRect();
+
+ document.body.appendChild(el);
+ el.classList.add('suggestion-item-container');
+ el.style.position = 'fixed';
+ el.style.left = -9999 + 'px';
+ const offsetLeft = offset?.left || 0;
+ const offsetTop = offset?.top || 0;
+ setTimeout(() => {
+ el.style.left =
+ offsetLeft + el.clientWidth < window.innerWidth
+ ? offsetLeft + 'px'
+ : offsetLeft +
+ (window.innerWidth - (offsetLeft + el.clientWidth) - 10) +
+ 'px';
+ el.style.bottom =
+ window.innerHeight - offsetTop + el.clientHeight > window.innerHeight
+ ? window.innerHeight - offsetTop - el.clientHeight - 20 + 'px'
+ : window.innerHeight - offsetTop + 'px';
+ }, 10);
+
+ el.style.display = 'block';
+ el.style.zIndex = '80';
+ } catch (e) {
+ console.log(e);
+ }
+ };
+
+ const hideList = function () {
+ el.style.display = 'none';
+ };
+
+ const removeClassAtIndex = function (index: number, className: string) {
+ const itemList = el.querySelector('.suggestion-item-list')?.childNodes;
+ const prevItem = itemList?.[index];
+ (prevItem as HTMLElement)?.classList.remove(className);
+ };
+
+ const addClassAtIndex = function (index: number, className: string) {
+ const itemList = el.querySelector('.suggestion-item-list')?.childNodes;
+ const prevItem = itemList?.[index];
+ (prevItem as HTMLElement)?.classList.add(className);
+ return prevItem as HTMLElement | undefined;
+ };
+
+ const setIndex = function (index: number, state: State, opts: Options) {
+ removeClassAtIndex(state.index, opts.activeClass);
+ state.index = index;
+ addClassAtIndex(state.index, opts.activeClass);
+ };
+
+ const goNext = function (view: EditorView, state: State, opts: Options) {
+ removeClassAtIndex(state.index, opts.activeClass);
+ state.index++;
+ state.index = state.index === state.suggestions.length ? 0 : state.index;
+ const el = addClassAtIndex(state.index, opts.activeClass);
+ el?.scrollIntoView({ block: 'nearest' });
+ };
+
+ const goPrev = function (view: EditorView, state: State, opts: Options) {
+ removeClassAtIndex(state.index, opts.activeClass);
+ state.index--;
+ state.index =
+ state.index === -1 ? state.suggestions.length - 1 : state.index;
+ const el = addClassAtIndex(state.index, opts.activeClass);
+ el?.scrollIntoView({ block: 'nearest' });
+ };
+
+ const select = function (view: EditorView, state: State, opts: Options) {
+ const item = state.suggestions[state.index];
+ const attrs = {
+ ...item,
+ };
+ const node = view.state.schema.nodes[state.type].create(attrs);
+ const spaceNode = view.state.schema.text(insertAfterSelect);
+
+ const tr = view.state.tr.replaceWith(state.range.from, state.range.to, [
+ node,
+ spaceNode,
+ ]);
+
+ //var newState = view.state.apply(tr);
+ //view.updateState(newState);
+ view.dispatch(tr);
+ };
+
+ return new Plugin({
+ key: new PluginKey('autosuggestions'),
+
+ // we will need state to track if suggestion dropdown is currently active or not
+ state: {
+ init() {
+ return getNewState();
+ },
+
+ apply(tr, state) {
+ try {
+ // compute state.active for current transaction and return
+ const newState = getNewState();
+ const selection = tr.selection;
+ if (selection.from !== selection.to) {
+ return newState;
+ }
+
+ const $position = selection.$from;
+ const match = getMatch($position, options);
+
+ // if match found update state
+ if (match) {
+ newState.active = true;
+ newState.range = match.range;
+ newState.type = match.type!;
+ newState.text = match.queryText;
+ }
+
+ return newState;
+ } catch (e) {
+ console.log(e);
+ return state;
+ }
+ },
+ },
+
+ // We'll need props to hi-jack keydown/keyup & enter events when suggestion dropdown
+ // is active.
+ props: {
+ handleKeyDown(view, e) {
+ const state = this.getState(view.state);
+
+ if (!state?.active && !state?.suggestions.length) {
+ return false;
+ }
+
+ if (e.key === 'ArrowDown') {
+ e.stopPropagation();
+ goNext(view, state, options);
+ return true;
+ } else if (e.key === 'ArrowUp') {
+ e.stopPropagation();
+ goPrev(view, state, options);
+ return true;
+ } else if (e.key === 'Enter') {
+ e.stopPropagation();
+ select(view, state, options);
+ return true;
+ } else if (e.key === 'Escape') {
+ e.stopPropagation();
+ clearTimeout(showListTimeoutId);
+ hideList();
+ // @ts-ignore
+ this.state = getNewState();
+ return true;
+ } else {
+ // didn't handle. handover to prosemirror for handling.
+ return false;
+ }
+ },
+
+ // to decorate the currently active @mention text in ui
+ decorations(editorState) {
+ const { active, range } = this.getState(editorState) || {};
+
+ if (!active || !range) return null;
+
+ return DecorationSet.create(editorState.doc, [
+ Decoration.inline(range.from, range.to, {
+ nodeName: 'span',
+ class: options.suggestionTextClass,
+ }),
+ ]);
+ },
+ },
+
+ // To track down state mutations and add dropdown reactions
+ view() {
+ return {
+ update: (view) => {
+ const state = this.key?.getState(view.state);
+ if (!state.active) {
+ hideList();
+ clearTimeout(showListTimeoutId);
+ return;
+ }
+ // debounce the call to avoid multiple requests
+ showListTimeoutId = debounce(
+ function () {
+ // get suggestions and set new state
+ options.getSuggestions(
+ state.type,
+ state.text,
+ function (suggestions) {
+ // update `state` argument with suggestions
+ state.suggestions = suggestions;
+ showList(view, state, suggestions, options);
+ },
+ );
+ },
+ options.delay,
+ this,
+ );
+ },
+ destroy: () => {
+ hideList();
+ },
+ };
+ },
+ });
+}
diff --git a/client/src/Project/CurrentTabContent/ChatTab/Input/nodes.ts b/client/src/Project/CurrentTabContent/ChatTab/Input/nodes.ts
new file mode 100644
index 0000000000..b78a04715a
--- /dev/null
+++ b/client/src/Project/CurrentTabContent/ChatTab/Input/nodes.ts
@@ -0,0 +1,101 @@
+import * as icons from 'file-icons-js';
+import { type AttributeSpec, type NodeSpec } from 'prosemirror-model';
+import { getFileExtensionForLang, splitPath } from '../../../../utils';
+
+export const mentionNode: NodeSpec = {
+ group: 'inline',
+ inline: true,
+ atom: true,
+
+ attrs: {
+ id: '' as AttributeSpec,
+ display: '' as AttributeSpec,
+ type: 'lang' as AttributeSpec,
+ isFirst: '' as AttributeSpec,
+ },
+
+ selectable: false,
+ draggable: false,
+
+ toDOM: (node) => {
+ const isDir =
+ node.attrs.type === 'dir' ||
+ node.attrs.display.endsWith('/') ||
+ node.attrs.display.endsWith('\\');
+ const folderIcon = document.createElement('span');
+ folderIcon.innerHTML = ``;
+ folderIcon.className = 'w-4 h-4 flex-shrink-0';
+
+ const repoIcon = document.createElement('span');
+ repoIcon.innerHTML = ``;
+ repoIcon.className = 'w-4 h-4 flex-shrink-0';
+
+ return [
+ 'span',
+ {
+ 'data-type': node.attrs.type,
+ 'data-id': node.attrs.id,
+ 'data-first': node.attrs.isFirst,
+ 'data-display': node.attrs.display,
+ class:
+ 'prosemirror-tag-node inline-flex gap-1 h-[22px] items-center align-bottom bg-bg-base border border-bg-border rounded px-1',
+ },
+ isDir
+ ? folderIcon
+ : node.attrs.type === 'repo'
+ ? repoIcon
+ : [
+ 'span',
+ {
+ class: `text-left w-4 h-4 file-icon flex-shrink-0 inline-flex items-center ${
+ icons.getClassWithColor(
+ (node.attrs.type === 'lang'
+ ? node.attrs.display.includes(' ')
+ ? '.txt'
+ : getFileExtensionForLang(node.attrs.display, true)
+ : node.attrs.display) || '.txt',
+ ) || icons.getClassWithColor('index.txt')
+ }`,
+ },
+ '',
+ ],
+ node.attrs.type === 'lang'
+ ? node.attrs.display
+ : isDir
+ ? splitPath(node.attrs.display).slice(-2)[0]
+ : splitPath(node.attrs.display).pop(),
+ ];
+ },
+
+ parseDOM: [
+ {
+ // match tag with following CSS Selector
+ tag: 'span[data-type][data-id][data-first][data-display]',
+
+ getAttrs: (dom) => {
+ const id = (dom as HTMLElement).getAttribute('data-id');
+ const type = (dom as HTMLElement).getAttribute('data-type');
+ const isFirst = (dom as HTMLElement).getAttribute('data-first');
+ const display = (dom as HTMLElement).getAttribute('data-display');
+ return {
+ id,
+ type,
+ isFirst,
+ display,
+ };
+ },
+ },
+ ],
+};
diff --git a/client/src/Project/CurrentTabContent/ChatTab/Input/placeholderPlugin.ts b/client/src/Project/CurrentTabContent/ChatTab/Input/placeholderPlugin.ts
new file mode 100644
index 0000000000..5910bf246e
--- /dev/null
+++ b/client/src/Project/CurrentTabContent/ChatTab/Input/placeholderPlugin.ts
@@ -0,0 +1,20 @@
+import { Plugin } from 'prosemirror-state';
+import { EditorView } from 'prosemirror-view';
+
+export const placeholderPlugin = (text: string) => {
+ const update = (view: EditorView) => {
+ if (view.state.doc.content.size > 2) {
+ view.dom.removeAttribute('data-placeholder');
+ } else {
+ view.dom.setAttribute('data-placeholder', text);
+ }
+ };
+
+ return new Plugin({
+ view(view) {
+ update(view);
+
+ return { update };
+ },
+ });
+};
diff --git a/client/src/Project/CurrentTabContent/ChatTab/Input/utils.ts b/client/src/Project/CurrentTabContent/ChatTab/Input/utils.ts
new file mode 100644
index 0000000000..1d3667045a
--- /dev/null
+++ b/client/src/Project/CurrentTabContent/ChatTab/Input/utils.ts
@@ -0,0 +1,46 @@
+import OrderedMap from 'orderedmap';
+import { type NodeSpec } from 'prosemirror-model';
+import {
+ InputEditorContent,
+ ParsedQueryTypeEnum,
+} from '../../../../types/general';
+import { mentionNode } from './nodes';
+
+export function addMentionNodes(nodes: OrderedMap) {
+ return nodes.append({
+ mention: mentionNode,
+ });
+}
+
+export const mapEditorContentToInputValue = (
+ inputState: InputEditorContent[],
+) => {
+ const getType = (type: string) =>
+ type === 'lang' || type === 'repo' ? type : 'path';
+ const newValue = inputState
+ .map((s) =>
+ s.type === 'mention'
+ ? `${getType(s.attrs.type)}:${s.attrs.id}`
+ : s.type === 'text'
+ ? s.text?.replace(new RegExp(String.fromCharCode(160), 'g'), ' ')
+ : '',
+ )
+ .join('');
+ const newValueParsed = inputState.map((s) =>
+ s.type === 'mention'
+ ? {
+ type:
+ s.attrs.type === 'lang'
+ ? ParsedQueryTypeEnum.LANG
+ : s.attrs.type === 'repo'
+ ? ParsedQueryTypeEnum.REPO
+ : ParsedQueryTypeEnum.PATH,
+ text: s.attrs.id,
+ }
+ : { type: ParsedQueryTypeEnum.TEXT, text: s.text },
+ );
+ return {
+ plain: newValue,
+ parsed: newValueParsed,
+ };
+};
diff --git a/client/src/Project/CurrentTabContent/ChatTab/Message/LoadingStep.tsx b/client/src/Project/CurrentTabContent/ChatTab/Message/LoadingStep.tsx
new file mode 100644
index 0000000000..67e2468a04
--- /dev/null
+++ b/client/src/Project/CurrentTabContent/ChatTab/Message/LoadingStep.tsx
@@ -0,0 +1,43 @@
+import { memo, useCallback, useContext } from 'react';
+import { useTranslation } from 'react-i18next';
+import FileChip from '../../../../components/Chips/FileChip';
+import { ChatLoadingStep, TabTypesEnum } from '../../../../types/general';
+import { TabsContext } from '../../../../context/tabsContext';
+
+type Props = ChatLoadingStep & {
+ side: 'left' | 'right';
+ repo?: string;
+};
+
+const LoadingStep = ({ type, path, displayText, side, repo }: Props) => {
+ const { t } = useTranslation();
+ const { openNewTab } = useContext(TabsContext.Handlers);
+
+ const handleClickFile = useCallback(() => {
+ if (type === 'proc' && repo && path) {
+ openNewTab(
+ {
+ type: TabTypesEnum.FILE,
+ repoRef: repo,
+ path,
+ },
+ side === 'left' ? 'right' : 'left',
+ );
+ }
+ }, [path, repo, side]);
+
+ return (
+
+
+ );
+};
+
+export default memo(ScrollableContent);
diff --git a/client/src/Project/CurrentTabContent/ChatTab/StarterMessage.tsx b/client/src/Project/CurrentTabContent/ChatTab/StarterMessage.tsx
new file mode 100644
index 0000000000..f1cb45b8bb
--- /dev/null
+++ b/client/src/Project/CurrentTabContent/ChatTab/StarterMessage.tsx
@@ -0,0 +1,100 @@
+import { memo, useCallback, useContext, useEffect, useState } from 'react';
+import { Trans, useTranslation } from 'react-i18next';
+import { ChatBubblesIcon } from '../../../icons';
+import { TutorialQuestionType } from '../../../types/api';
+import { getTutorialQuestions } from '../../../services/api';
+import { ProjectContext } from '../../../context/projectContext';
+
+type Props = {
+ isEmptyConversation: boolean;
+ setInputValueImperatively: (v: string) => void;
+};
+
+const StarterMessage = ({
+ isEmptyConversation,
+ setInputValueImperatively,
+}: Props) => {
+ useTranslation();
+ const [tutorials, setTutorials] = useState([]);
+ const { project } = useContext(ProjectContext.Current);
+
+ const getDiverseTutorials = useCallback(async () => {
+ if (project?.repos.length) {
+ const tutorials = [];
+ let tutorialsPerRepo = Math.floor(10 / project.repos.length);
+ let remainingTutorials = 10;
+
+ for (const repo of project.repos) {
+ const repoTutorials = await getTutorialQuestions(repo.repo.ref);
+
+ const tutorialsToAdd = Math.min(
+ tutorialsPerRepo,
+ repoTutorials.questions.length,
+ remainingTutorials,
+ );
+
+ tutorials.push(...repoTutorials.questions.slice(0, tutorialsToAdd));
+
+ remainingTutorials -= tutorialsToAdd;
+
+ if (remainingTutorials <= 0) {
+ break;
+ }
+ }
+
+ setTutorials(tutorials);
+ }
+ }, [project?.repos]);
+
+ useEffect(() => {
+ getDiverseTutorials();
+ }, [getDiverseTutorials]);
+
+ return (
+ (null);
+ const [hoverableRanges, setHoverableRanges] = useState<
+ Record | undefined
+ >(undefined);
+ const [indexRequested, setIndexRequested] = useState(false);
+ const [isFetched, setIsFetched] = useState(false);
+ const { apiUrl } = useContext(DeviceContext);
+ const { setFocusedTabItems } = useContext(CommandBarContext.Handlers);
+ const { refreshCurrentProjectRepos } = useContext(ProjectContext.Current);
+ const eventSourceRef = useRef(null);
+ const [isPending, startTransition] = useTransition();
+ const { openNewTab, updateTabProperty } = useContext(TabsContext.Handlers);
+ const { focusedPanel } = useContext(TabsContext.All);
+ const { fileHighlights, hoveredLines } = useContext(
+ FileHighlightsContext.Values,
+ );
+ const highlights = useMemo(() => {
+ return fileHighlights[path]?.sort((a, b) =>
+ a && b && a?.lines?.[1] - a?.lines?.[0] < b?.lines?.[1] - b?.lines?.[0]
+ ? -1
+ : 1,
+ );
+ }, [path, fileHighlights]);
+
+ useEffect(() => {
+ setIndexRequested(false);
+ setIsFetched(false);
+ }, [path, repoRef]);
+
+ const refetchFile = useCallback(async () => {
+ try {
+ const resp = await getFileContent(repoRef, path, branch);
+ if (!resp) {
+ setIsFetched(true);
+ return;
+ }
+ startTransition(() => {
+ setFile(resp);
+ setIsFetched(true);
+ });
+ // if (item.indexed) {
+ const data = await getHoverables(path, repoRef, branch);
+ setHoverableRanges(mapRanges(data.ranges));
+ // }
+ } catch (err) {
+ setIsFetched(true);
+ }
+ }, [repoRef, path, branch]);
+
+ useEffect(() => {
+ refetchFile();
+ }, [refetchFile]);
+
+ const startEventSource = useCallback(() => {
+ eventSourceRef.current = new EventSource(
+ `${apiUrl.replace('https:', '')}/repos/status`,
+ );
+ eventSourceRef.current.onmessage = (ev) => {
+ try {
+ const data = JSON.parse(ev.data);
+ if (data.ev?.status_change && data.ref === repoRef) {
+ if (data.ev?.status_change === SyncStatus.Done) {
+ eventSourceRef.current?.close();
+ eventSourceRef.current = null;
+ refreshCurrentProjectRepos();
+ setTimeout(refetchFile, 2000);
+ }
+ }
+ } catch {
+ eventSourceRef.current?.close();
+ eventSourceRef.current = null;
+ }
+ };
+ eventSourceRef.current.onerror = () => {
+ eventSourceRef.current?.close();
+ eventSourceRef.current = null;
+ };
+ }, [repoRef]);
+
+ useEffect(() => {
+ return () => {
+ eventSourceRef.current?.close();
+ eventSourceRef.current = null;
+ };
+ }, []);
+
+ const onIndexRequested = useCallback(async () => {
+ if (path) {
+ setIndexRequested(true);
+ await forceFileToBeIndexed(repoRef, path);
+ startEventSource();
+ setTimeout(() => refetchFile(), 1000);
+ }
+ }, [repoRef, path]);
+
+ const handleClick = useCallback(() => {
+ updateTabProperty(tabKey, 'isTemp', false, side);
+ }, [updateTabProperty, tabKey, side]);
+
+ const linesNumber = useMemo(() => {
+ return file?.contents?.split(/\n(?!$)/g).length || 0;
+ }, [file?.contents]);
+
+ const handleExplain = useCallback(() => {
+ openNewTab(
+ {
+ type: TabTypesEnum.CHAT,
+ initialQuery: {
+ path,
+ repoRef,
+ branch,
+ lines: [0, linesNumber - 1],
+ },
+ },
+ side === 'left' ? 'right' : 'left',
+ );
+ }, [path, repoRef, branch, linesNumber, side, openNewTab]);
+ const handleKeyEvent = useCallback(
+ (e: KeyboardEvent) => {
+ if (checkEventKeys(e, explainFileShortcut)) {
+ handleExplain();
+ } else if (checkEventKeys(e, openInSplitViewShortcut)) {
+ handleMoveToAnotherSide();
+ }
+ },
+ [handleExplain, handleMoveToAnotherSide],
+ );
+ useKeyboardNavigation(
+ handleKeyEvent,
+ !file?.contents || focusedPanel !== side,
+ );
+
+ useEffect(() => {
+ if (focusedPanel === side && file?.contents) {
+ setFocusedTabItems([
+ {
+ label: t('Explain file'),
+ Icon: FileWithSparksIcon,
+ id: 'explain_file',
+ key: 'explain_file',
+ onClick: handleExplain,
+ closeOnClick: true,
+ shortcut: explainFileShortcut,
+ footerHint: '',
+ footerBtns: [{ label: t('Explain'), shortcut: ['entr'] }],
+ },
+ {
+ label: t('Open in split view'),
+ Icon: SplitViewIcon,
+ id: 'split_view',
+ key: 'split_view',
+ onClick: handleMoveToAnotherSide,
+ closeOnClick: true,
+ shortcut: openInSplitViewShortcut,
+ footerHint: '',
+ footerBtns: [{ label: t('Move'), shortcut: ['entr'] }],
+ },
+ ]);
+ }
+ }, [
+ focusedPanel,
+ side,
+ file?.contents,
+ handleExplain,
+ handleMoveToAnotherSide,
+ ]);
+
+ const dropdownComponentProps = useMemo(() => {
+ return {
+ handleExplain,
+ handleMoveToAnotherSide,
+ };
+ }, [handleExplain, handleMoveToAnotherSide]);
+
+ return (
+ 1 ? 'bottom-end' : 'bottom-start'}
+ // >
+
+ //
+ );
+};
+
+export default memo(AddTabButton);
diff --git a/client/src/Project/CurrentTabContent/Header/AddTabDropdown.tsx b/client/src/Project/CurrentTabContent/Header/AddTabDropdown.tsx
new file mode 100644
index 0000000000..eaf05b698b
--- /dev/null
+++ b/client/src/Project/CurrentTabContent/Header/AddTabDropdown.tsx
@@ -0,0 +1,78 @@
+import React, {
+ memo,
+ useCallback,
+ useContext,
+ MouseEvent,
+ useMemo,
+} from 'react';
+import { useTranslation } from 'react-i18next';
+import SectionItem from '../../../components/Dropdown/Section/SectionItem';
+import { ChatBubblesIcon, CodeStudioIcon } from '../../../icons';
+import { TabsContext } from '../../../context/tabsContext';
+import { TabTypesEnum } from '../../../types/general';
+import { checkEventKeys } from '../../../utils/keyboardUtils';
+import useKeyboardNavigation from '../../../hooks/useKeyboardNavigation';
+
+type Props = {
+ side: 'left' | 'right';
+};
+
+const AddTabDropdown = ({ side }: Props) => {
+ const { t } = useTranslation();
+ const { openNewTab } = useContext(TabsContext.Handlers);
+
+ const openChatTab = useCallback(() => {
+ openNewTab({ type: TabTypesEnum.CHAT }, side);
+ }, [openNewTab, side]);
+
+ const shortcuts = useMemo(() => {
+ return { newChat: ['option', 'N'], newStudio: ['option', 'shift', 'N'] };
+ }, []);
+
+ const handleKeyEvent = useCallback(
+ (e: KeyboardEvent) => {
+ if (checkEventKeys(e, shortcuts.newChat)) {
+ e.stopPropagation();
+ e.preventDefault();
+ openNewTab({ type: TabTypesEnum.CHAT });
+ }
+ },
+ [openNewTab],
+ );
+ useKeyboardNavigation(handleKeyEvent, side !== 'left');
+
+ const noPropagate = useCallback((e?: MouseEvent) => {
+ e?.stopPropagation();
+ }, []);
+
+ return (
+ (null);
+ const [{ handlerId }, drop] = useDrop({
+ accept: `tab-${side}`,
+ canDrop: (item: DraggableTabItem) => item.side === side,
+ collect(monitor) {
+ return {
+ handlerId: monitor.getHandlerId(),
+ };
+ },
+ hover(item: DraggableTabItem, monitor) {
+ if (!ref.current || item.side !== side) {
+ return;
+ }
+ const dragIndex = item.index;
+ const hoverIndex = i;
+ // Don't replace items with themselves
+ if (dragIndex === hoverIndex) {
+ return;
+ }
+ // Determine rectangle on screen
+ const hoverBoundingRect = ref.current?.getBoundingClientRect();
+ // Get vertical middle
+ const hoverMiddleX =
+ (hoverBoundingRect.right - hoverBoundingRect.left) / 2;
+ // Determine mouse position
+ const clientOffset = monitor.getClientOffset();
+ // Get pixels to the top
+ const hoverClientX = (clientOffset?.x || 0) - hoverBoundingRect.left;
+ // Only perform the move when the mouse has crossed half of the items height
+ // When dragging downwards, only move when the cursor is below 50%
+ // When dragging upwards, only move when the cursor is above 50%
+ // Dragging downwards
+ if (dragIndex < hoverIndex && hoverClientX < hoverMiddleX) {
+ return;
+ }
+ // Dragging upwards
+ if (dragIndex > hoverIndex && hoverClientX > hoverMiddleX) {
+ return;
+ }
+ // Time to actually perform the action
+ moveTab(dragIndex, hoverIndex);
+ // Note: we're mutating the monitor item here!
+ // Generally it's better to avoid mutations,
+ // but it's good here for the sake of performance
+ // to avoid expensive index searches.
+ item.index = hoverIndex;
+ },
+ });
+ const [{ isDragging }, drag] = useDrag({
+ type: `tab-${side}`,
+ canDrag: side !== 'left' || !isOnlyTab,
+ item: (): DraggableTabItem => {
+ return {
+ id: tabKey,
+ index: i,
+ // @ts-ignore
+ t: {
+ key: tabKey,
+ repoRef: repoRef!,
+ path: path!,
+ type,
+ title,
+ branch,
+ scrollToLine,
+ tokenRange,
+ },
+ side,
+ };
+ },
+ collect: (monitor) => ({
+ isDragging: monitor.isDragging(),
+ }),
+ });
+ drag(drop(ref));
+
+ const handleClose = useCallback(
+ (e: MouseEvent) => {
+ e.stopPropagation();
+ closeTab(tabKey, side);
+ },
+ [tabKey, side],
+ );
+
+ const handleClick = useCallback(() => {
+ const setAction = side === 'left' ? setActiveLeftTab : setActiveRightTab;
+ // @ts-ignore
+ setAction({
+ path,
+ repoRef,
+ key: tabKey,
+ type,
+ title,
+ branch,
+ scrollToLine,
+ tokenRange,
+ });
+ setFocusedPanel(side);
+ }, [path, repoRef, tabKey, side, branch, scrollToLine, tokenRange, title]);
+
+ return (
+
+ {type === TabTypesEnum.FILE ? (
+ >;
+ isExpanded: boolean;
+};
+
+const reactRoot = document.getElementById('root')!;
+
+const ConversationsNav = ({ isExpanded, setExpanded }: Props) => {
+ const { t } = useTranslation();
+ const { project } = useContext(ProjectContext.Current);
+ const containerRef = useRef(null);
+
+ const toggleExpanded = useCallback(() => {
+ setExpanded((prev) => (prev === 0 ? -1 : 0));
+ }, []);
+
+ useEffect(() => {
+ if (isExpanded) {
+ // containerRef.current?.scrollIntoView({ block: 'nearest' });
+ }
+ }, [isExpanded]);
+
+ const noPropagate = useCallback((e?: MouseEvent) => {
+ e?.stopPropagation();
+ }, []);
+
+ return (
+ >;
+ isExpanded: boolean;
+ i: number;
+ projectId: string;
+ lastIndex: string;
+ currentPath?: string;
+ branch: string;
+ allBranches: { name: string; last_commit_unix_secs: number }[];
+ indexedBranches: string[];
+ indexingData?: { status: SyncStatus; percentage?: string; branch?: string };
+};
+
+const reactRoot = document.getElementById('root')!;
+
+const RepoNav = ({
+ repoRef,
+ i,
+ isExpanded,
+ setExpanded,
+ branch,
+ indexedBranches,
+ allBranches,
+ projectId,
+ lastIndex,
+ currentPath,
+ indexingData,
+}: Props) => {
+ const { t } = useTranslation();
+ const [files, setFiles] = useState([]);
+ const containerRef = useRef(null);
+
+ const fetchFiles = useCallback(
+ async (path?: string) => {
+ const resp = await getFolderContent(repoRef, path, branch);
+ if (!resp.entries) {
+ return [];
+ }
+ return resp?.entries.sort((a, b) => {
+ if ((a.entry_data === 'Directory') === (b.entry_data === 'Directory')) {
+ return a.name.toLowerCase() < b.name.toLowerCase() ? -1 : 1;
+ } else {
+ return a.entry_data === 'Directory' ? -1 : 1;
+ }
+ });
+ },
+ [repoRef, branch],
+ );
+
+ const refetchParentFolder = useCallback(() => {
+ fetchFiles().then(setFiles);
+ }, [fetchFiles]);
+
+ useEffect(() => {
+ refetchParentFolder();
+ }, [refetchParentFolder]);
+
+ const toggleExpanded = useCallback(() => {
+ setExpanded((prev) => (prev === i ? -1 : i));
+ }, [i]);
+
+ useEffect(() => {
+ if (isExpanded) {
+ // containerRef.current?.scrollIntoView({ block: 'nearest' });
+ }
+ }, [isExpanded]);
+
+ const dropdownComponentProps = useMemo(() => {
+ return {
+ key: repoRef,
+ projectId,
+ repoRef,
+ selectedBranch: branch,
+ indexedBranches,
+ allBranches,
+ };
+ }, [projectId, repoRef, branch, indexedBranches, allBranches]);
+
+ const noPropagate = useCallback((e?: MouseEvent) => {
+ e?.stopPropagation();
+ }, []);
+
+ const isIndexing = useMemo(() => {
+ if (!indexingData) {
+ return false;
+ }
+ return [
+ SyncStatus.Indexing,
+ SyncStatus.Syncing,
+ SyncStatus.Queued,
+ ].includes(indexingData.status);
+ }, [indexingData]);
+
+ return (
+ (null);
+ const [isBranchesOpen, setIsBranchesOpen] = useState(false);
+ const [isSyncing, setIsSyncing] = useState(false);
+ const [search, setSearch] = useState('');
+ const [branchesToSync, setBranchesToSync] = useState([]);
+ const [indexing, setIndexing] = useState({ branch: '', percentage: 0 });
+ const { apiUrl, isSelfServe } = useContext(DeviceContext);
+ const { refreshCurrentProjectRepos } = useContext(ProjectContext.Current);
+ const { isSubscribed } = useContext(PersonalQuotaContext.Values);
+
+ const startEventSource = useCallback(() => {
+ eventSourceRef.current?.close();
+ eventSourceRef.current = new EventSource(
+ `${apiUrl.replace('https:', '')}/repos/status`,
+ );
+ eventSourceRef.current.onmessage = (ev) => {
+ try {
+ const data = JSON.parse(ev.data);
+ console.log('data', data);
+ if (data.ev?.status_change && data.ref === repoRef) {
+ if (data.ev?.status_change === SyncStatus.Done) {
+ setIsSyncing(false);
+ refreshCurrentProjectRepos();
+ }
+ }
+ if (data.ev?.index_percent && data.b?.select[0]) {
+ setIndexing(() => ({
+ branch: data.b?.select[0],
+ percentage: data.ev?.index_percent || 1,
+ }));
+ }
+ } catch {
+ eventSourceRef.current?.close();
+ eventSourceRef.current = null;
+ }
+ };
+ eventSourceRef.current.onerror = () => {
+ eventSourceRef.current?.close();
+ eventSourceRef.current = null;
+ };
+ }, [repoRef]);
+
+ useEffect(() => {
+ if (!branchesToSync.length) {
+ eventSourceRef.current?.close();
+ eventSourceRef.current = null;
+ }
+ }, [branchesToSync]);
+
+ const onRepoSync = useCallback(
+ async (e?: MouseEvent) => {
+ e?.stopPropagation();
+ await syncRepo(repoRef);
+ setIsSyncing(true);
+ startEventSource();
+ },
+ [repoRef],
+ );
+
+ const toggleBranches = useCallback((e?: MouseEvent) => {
+ e?.stopPropagation();
+ setIsBranchesOpen((prev) => !prev);
+ }, []);
+
+ const handleInputChange = useCallback((e: ChangeEvent) => {
+ setSearch(e.target.value);
+ }, []);
+
+ const noPropagate = useCallback((e?: MouseEvent) => {
+ e?.stopPropagation();
+ }, []);
+
+ useEffect(() => {
+ setBranchesToSync((prevState) =>
+ prevState.filter((p) => !indexedBranches.includes(p)),
+ );
+ }, [indexedBranches]);
+
+ const notSyncedBranches = useMemo(() => {
+ return [...allBranches]
+ .reverse()
+ .filter(
+ (b) =>
+ !indexedBranches.includes(b.name) && !branchesToSync.includes(b.name),
+ )
+ .map((b) => b.name);
+ }, [indexedBranches, allBranches, branchesToSync]);
+
+ const handleRemoveFromProject = useCallback(async () => {
+ if (projectId) {
+ await removeRepoFromProject(projectId, repoRef);
+ refreshCurrentProjectRepos();
+ }
+ }, [projectId, repoRef]);
+
+ const indexedBranchesToShow = useMemo(() => {
+ if (!search) {
+ return indexedBranches;
+ }
+ return indexedBranches.filter((b) =>
+ b
+ .replace(/^origin\//, '')
+ .toLowerCase()
+ .includes(search.toLowerCase()),
+ );
+ }, [indexedBranches, search]);
+
+ const indexingBranchesToShow = useMemo(() => {
+ if (!search) {
+ return branchesToSync;
+ }
+ return branchesToSync.filter((b) =>
+ b
+ .replace(/^origin\//, '')
+ .toLowerCase()
+ .includes(search.toLowerCase()),
+ );
+ }, [branchesToSync, search]);
+
+ const notIndexedBranchesToShow = useMemo(() => {
+ if (!search) {
+ return notSyncedBranches;
+ }
+ return notSyncedBranches.filter((b) =>
+ b
+ .replace(/^origin\//, '')
+ .toLowerCase()
+ .includes(search.toLowerCase()),
+ );
+ }, [notSyncedBranches, search]);
+
+ const switchToBranch = useCallback(
+ async (branch: string, e?: MouseEvent) => {
+ e?.stopPropagation();
+ await changeRepoBranch(projectId, repoRef, branch);
+ refreshCurrentProjectRepos();
+ },
+ [projectId, repoRef],
+ );
+
+ return (
+ ;
+ defaultOpen?: boolean;
+ indexed: boolean;
+ repoRef: string;
+ lastIndex: string;
+ currentPath?: string;
+ branch?: string | null;
+};
+
+const RepoEntry = ({
+ name,
+ level,
+ isDirectory,
+ currentPath,
+ fullPath,
+ fetchFiles,
+ defaultOpen,
+ indexed,
+ repoRef,
+ lastIndex,
+ branch,
+}: Props) => {
+ const { openNewTab } = useContext(TabsContext.Handlers);
+ const [isOpen, setOpen] = useState(
+ defaultOpen || (currentPath && currentPath.startsWith(fullPath)),
+ );
+ const [subItems, setSubItems] = useState(null);
+ const ref = useRef(null);
+ const [isMounted, setIsMounted] = useState(false);
+
+ const refetchFolderFiles = useCallback(() => {
+ fetchFiles(fullPath).then(setSubItems);
+ }, [fullPath, fetchFiles]);
+
+ useEffect(() => {
+ if (currentPath && currentPath.startsWith(fullPath)) {
+ setOpen(true);
+ }
+ }, [currentPath, fullPath]);
+
+ useEffect(() => {
+ if (
+ subItems?.length &&
+ subItems.find(
+ (si) => si.entry_data !== 'Directory' && !si.entry_data.File.indexed,
+ ) &&
+ isMounted
+ ) {
+ refetchFolderFiles();
+ } else {
+ setIsMounted(true);
+ }
+ }, [lastIndex]);
+
+ useEffect(() => {
+ if (isDirectory && isOpen) {
+ refetchFolderFiles();
+ }
+ }, [isOpen, isDirectory, refetchFolderFiles]);
+
+ const handleClick = useCallback(() => {
+ if (isDirectory) {
+ setOpen((prev) => !prev);
+ } else {
+ openNewTab({
+ type: TabTypesEnum.FILE,
+ path: fullPath,
+ repoRef,
+ branch,
+ });
+ }
+ }, [isDirectory, fullPath, openNewTab, repoRef, branch]);
+
+ return (
+ (null);
+
+ const startEventSource = useCallback(() => {
+ eventSourceRef.current?.close();
+ eventSourceRef.current = new EventSource(
+ `${apiUrl.replace('https:', '')}/repos/status`,
+ );
+ eventSourceRef.current.onmessage = (ev) => {
+ const data = JSON.parse(ev.data);
+ if (data.ev?.status_change) {
+ if (data.ev?.status_change === SyncStatus.Done) {
+ refreshCurrentProjectRepos();
+ }
+ setIndexingRepos((prev) => ({
+ ...prev,
+ [data.ref]: {
+ ...(prev[data.ref] ? prev[data.ref] : {}),
+ status: data.ev?.status_change,
+ },
+ }));
+ }
+ if (data.ev?.index_percent) {
+ setIndexingRepos((prev) => ({
+ ...prev,
+ [data.ref]: {
+ ...(prev[data.ref] ? prev[data.ref] : {}),
+ percentage: data.ev?.index_percent,
+ branch: data.b?.select[0],
+ },
+ }));
+ }
+ };
+ }, []);
+
+ useEffect(() => {
+ startEventSource();
+ getIndexedRepos().then((repos) => {
+ const reposInProgress = repos.list.filter(
+ (r) => r.sync_status !== SyncStatus.Done,
+ );
+ setIndexingRepos((prev) => {
+ const newRepos = JSON.parse(JSON.stringify(prev));
+ reposInProgress.forEach((r) => {
+ newRepos[r.ref] = {
+ ...(newRepos[r.ref] || {}),
+ status: r.sync_status,
+ };
+ });
+ return newRepos;
+ });
+ });
+ const intervalId = window.setInterval(startEventSource, 10 * 60 * 1000);
+
+ return () => {
+ clearInterval(intervalId);
+ eventSourceRef.current?.close();
+ eventSourceRef.current = null;
+ };
+ }, []);
+
+ const currentlyFocusedTab = useMemo(() => {
+ const focusedTab = focusedPanel === 'left' ? leftTab : rightTab;
+ if (focusedTab?.type === TabTypesEnum.FILE) {
+ return focusedTab;
+ }
+ return null;
+ }, [focusedPanel, leftTab, rightTab]);
+
+ useEffect(() => {
+ if (project?.repos.length === 1) {
+ setExpanded(!!project?.conversations.length ? 1 : 0);
+ }
+ }, [project?.repos]);
+
+ useEffect(() => {
+ if (currentlyFocusedTab?.repoRef) {
+ const repoIndex = project?.repos.findIndex(
+ (r) => r.repo.ref === currentlyFocusedTab.repoRef,
+ );
+ if (repoIndex !== undefined && repoIndex > -1) {
+ setExpanded(repoIndex + (!!project?.conversations ? 1 : 0));
+ }
+ }
+ }, [currentlyFocusedTab]);
+
+ return (
+
);
};
-export default AutocompleteMenu;
+export default memo(AutocompleteMenu);
diff --git a/client/src/components/SearchInput/AutocompleteMenuItem.tsx b/client/src/Project/LeftSidebar/RegexSearchPanel/AutocompleteMenuItem.tsx
similarity index 57%
rename from client/src/components/SearchInput/AutocompleteMenuItem.tsx
rename to client/src/Project/LeftSidebar/RegexSearchPanel/AutocompleteMenuItem.tsx
index 12c18eb79e..45d35695ca 100644
--- a/client/src/components/SearchInput/AutocompleteMenuItem.tsx
+++ b/client/src/Project/LeftSidebar/RegexSearchPanel/AutocompleteMenuItem.tsx
@@ -1,7 +1,7 @@
-import React from 'react';
+import React, { memo, useEffect, useMemo, useRef } from 'react';
import { Trans } from 'react-i18next';
-import CodeBlockSearch from '../CodeBlock/Search';
-import { ResultItemType, SuggestionType } from '../../types/results';
+import { ResultItemType, SuggestionType } from '../../../types/results';
+import CodeBlockSearch from '../../../components/Code/CodeBlockSearch';
type Props = {
item: SuggestionType;
@@ -13,34 +13,59 @@ type Props = {
item: SuggestionType;
index: number;
}) => any;
+ isFocused: boolean;
+ isFirst: boolean;
};
-const AutocompleteMenuItem = ({ getItemProps, item, index }: Props) => {
+const AutocompleteMenuItem = ({
+ getItemProps,
+ item,
+ index,
+ isFocused,
+ isFirst,
+}: Props) => {
+ const ref = useRef(null);
+
+ useEffect(() => {
+ if (isFocused) {
+ ref.current?.scrollIntoView({ block: 'nearest' });
+ }
+ }, [isFocused]);
+
+ const snippets = useMemo(() => {
+ if (item.type === ResultItemType.CODE) {
+ return item.snippets?.slice(0, 1).map((s) => ({
+ ...s,
+ code: s.code.split('\n').slice(0, 5).join('\n'), // don't render big snippets that have over 5 lines
+ }));
+ }
+ return [];
+ }, [item]);
+
return (
{item.type === ResultItemType.FLAG ||
item.type === ResultItemType.LANG ? (
{item.data}
) : item.type === ResultItemType.CODE ? (
({
- ...s,
- code: s.code.split('\n').slice(0, 5).join('\n'), // don't render big snippets that have over 5 lines
- }))}
+ snippets={snippets}
language={item.language}
filePath={item.relativePath}
- repoName={item.repoName}
- branch={item.branch}
collapsed={false}
- onClick={() => {}}
- repoPath={item.repoPath}
+ repoRef={item.repoRef}
/>
) : item.type === ResultItemType.FILE ? (
<>
@@ -51,7 +76,7 @@ const AutocompleteMenuItem = ({ getItemProps, item, index }: Props) => {
) : item.type === ResultItemType.REPO ? (
<>
- {item.repository}
+ {item.repoName}
Repository
@@ -61,4 +86,4 @@ const AutocompleteMenuItem = ({ getItemProps, item, index }: Props) => {
);
};
-export default AutocompleteMenuItem;
+export default memo(AutocompleteMenuItem);
diff --git a/client/src/components/CodeBlock/Code/index.tsx b/client/src/Project/LeftSidebar/RegexSearchPanel/Results/CodeLine.tsx
similarity index 54%
rename from client/src/components/CodeBlock/Code/index.tsx
rename to client/src/Project/LeftSidebar/RegexSearchPanel/Results/CodeLine.tsx
index b5ba0625f0..8468ad0808 100644
--- a/client/src/components/CodeBlock/Code/index.tsx
+++ b/client/src/Project/LeftSidebar/RegexSearchPanel/Results/CodeLine.tsx
@@ -1,45 +1,44 @@
-import React, { useEffect, useMemo } from 'react';
-import { getPrismLanguage, tokenizeCode } from '../../../utils/prism';
-import {
- HighlightMap,
- Range,
- SnippetSymbol,
- TokensLine,
-} from '../../../types/results';
-import { Token } from '../../../types/prism';
-import CodeContainer from './CodeContainer';
+import React, { memo, useCallback, useContext, useMemo } from 'react';
+import { TabTypesEnum } from '../../../../types/general';
+import { CodeIcon } from '../../../../icons';
+import { TabsContext } from '../../../../context/tabsContext';
+import { getPrismLanguage, tokenizeCode } from '../../../../utils/prism';
+import { HighlightMap, Range, TokensLine } from '../../../../types/results';
+import { Token } from '../../../../types/prism';
+import CodeToken from '../../../../components/Code/CodeToken';
type Props = {
+ path: string;
+ repoRef: string;
+ lineStart: number;
+ lineEnd: number;
code: string;
language: string;
- lineStart?: number;
- highlights?: Range[];
- showLines?: boolean;
- symbols?: SnippetSymbol[];
- onlySymbolLines?: boolean;
- removePaddings?: boolean;
- lineHoverEffect?: boolean;
- isDiff?: boolean;
- canWrap?: boolean;
- highlightColor?: string;
- onTokensLoaded?: () => void;
+ highlights: Range[];
};
-const Code = ({
+const noOp = () => {};
+
+const CodeLine = ({
+ path,
+ repoRef,
+ lineStart,
+ lineEnd,
code,
language,
- lineStart = 0,
- showLines = true,
highlights,
- symbols,
- onlySymbolLines,
- removePaddings,
- lineHoverEffect,
- highlightColor,
- isDiff,
- onTokensLoaded,
- canWrap,
}: Props) => {
+ const { openNewTab } = useContext(TabsContext.Handlers);
+
+ const onClick = useCallback(() => {
+ openNewTab({
+ type: TabTypesEnum.FILE,
+ path,
+ repoRef,
+ scrollToLine: `${lineStart}_${lineEnd}`,
+ });
+ }, [path, lineEnd, lineStart, repoRef, openNewTab]);
+
const lang = useMemo(
() => getPrismLanguage(language) || 'plaintext',
[language],
@@ -58,7 +57,7 @@ const Code = ({
const getMap = (tokens: Token[]): HighlightMap[] => {
const highlightMaps: HighlightMap[] = [];
- tokens.forEach((token, index) => {
+ tokens.forEach((token) => {
highlightMaps.push(...getToken(token));
});
@@ -120,41 +119,41 @@ const Code = ({
.map((l): TokensLine => ({ tokens: l, lineNumber: null }));
let currentLine = lineStart;
for (let i = 0; i < lines.length; i++) {
- if (
- isDiff &&
- (lines[i].tokens[0]?.token.content === '-' ||
- lines[i].tokens[1]?.token.content === '-')
- ) {
- continue;
- }
lines[i].lineNumber = currentLine + 1;
currentLine++;
}
return lines;
- }, [tokens, lineStart, isDiff]);
+ }, [tokens, lineStart]);
- useEffect(() => {
- if (tokensMap.length && onTokensLoaded) {
- onTokensLoaded();
+ const lineToRender = useMemo(() => {
+ const ltr = tokensMap.find((l) => !!l.tokens.find((t) => t.highlight));
+ const firstHighlightIndex = ltr?.tokens.findIndex((t) => t.highlight) || 0;
+ if (ltr) {
+ ltr.tokens = ltr.tokens.slice(Math.max(firstHighlightIndex - 2, 0));
}
+ return ltr;
}, [tokensMap]);
return (
-
+
);
};
-export default Code;
+export default memo(CodeLine);
diff --git a/client/src/Project/LeftSidebar/RegexSearchPanel/Results/CodeResult.tsx b/client/src/Project/LeftSidebar/RegexSearchPanel/Results/CodeResult.tsx
new file mode 100644
index 0000000000..154ec07d4b
--- /dev/null
+++ b/client/src/Project/LeftSidebar/RegexSearchPanel/Results/CodeResult.tsx
@@ -0,0 +1,120 @@
+import {
+ memo,
+ useCallback,
+ useContext,
+ useEffect,
+ useRef,
+ useState,
+} from 'react';
+import { SnippetItem } from '../../../../types/api';
+import { ChevronRightIcon } from '../../../../icons';
+import FileIcon from '../../../../components/FileIcon';
+import { TabsContext } from '../../../../context/tabsContext';
+import { TabTypesEnum } from '../../../../types/general';
+import useKeyboardNavigation from '../../../../hooks/useKeyboardNavigation';
+import { isFocusInInput } from '../../../../utils/domUtils';
+import CodeLine from './CodeLine';
+
+type Props = {
+ relative_path: string;
+ repo_ref: string;
+ lang: string;
+ snippets: SnippetItem[];
+ isFocused: boolean;
+ isFirst: boolean;
+};
+
+const CodeResult = ({
+ relative_path,
+ repo_ref,
+ lang,
+ snippets,
+ isFocused,
+ isFirst,
+}: Props) => {
+ const { openNewTab } = useContext(TabsContext.Handlers);
+ const ref = useRef(null);
+ const [isExpanded, setIsExpanded] = useState(true);
+ const toggleExpanded = useCallback(() => {
+ setIsExpanded((prev) => !prev);
+ }, []);
+
+ useEffect(() => {
+ if (isFocused) {
+ ref.current?.scrollIntoView({ block: 'nearest' });
+ }
+ }, [isFocused]);
+
+ const handleKeyEvent = useCallback(
+ (e: KeyboardEvent) => {
+ if (
+ e.key === 'Enter' &&
+ (!isFocusInInput() || document.activeElement?.id === 'regex-search')
+ ) {
+ e.stopPropagation();
+ e.preventDefault();
+ openNewTab({
+ type: TabTypesEnum.FILE,
+ path: relative_path,
+ repoRef: repo_ref,
+ scrollToLine: `${snippets[0].line_range.start}_${snippets[0].line_range.end}`,
+ });
+ }
+ },
+ [repo_ref, relative_path, openNewTab],
+ );
+ useKeyboardNavigation(handleKeyEvent, !isFocused);
+
+ const handleClick = useCallback(() => {
+ openNewTab({
+ type: TabTypesEnum.FILE,
+ path: relative_path,
+ repoRef: repo_ref,
+ });
+ }, [repo_ref, relative_path, openNewTab]);
+
+ return (
+ (null);
+
+ useEffect(() => {
+ if (isFocused) {
+ ref.current?.scrollIntoView({ block: 'nearest' });
+ }
+ }, [isFocused]);
+
+ const handleKeyEvent = useCallback(
+ (e: KeyboardEvent) => {
+ if (e.key === 'Enter') {
+ e.stopPropagation();
+ e.preventDefault();
+ if (!is_dir) {
+ openNewTab({
+ type: TabTypesEnum.FILE,
+ path: relative_path.text,
+ repoRef: repo_ref,
+ });
+ }
+ }
+ },
+ [repo_ref, relative_path, is_dir, openNewTab],
+ );
+ useKeyboardNavigation(handleKeyEvent, !isFocused);
+
+ const handleClick = useCallback(() => {
+ if (is_dir) {
+ return;
+ }
+ openNewTab({
+ type: TabTypesEnum.FILE,
+ path: relative_path.text,
+ repoRef: repo_ref,
+ });
+ }, [relative_path, repo_ref, is_dir, openNewTab]);
+ return (
+ => {
+// const newOptions = await getAutocomplete(query);
+// setOptions(mapResults(newOptions));
+// },
+// 100,
+// { trailing: true, leading: false },
+// );
+
+type ResultType = CodeItem | RepoItem | FileResItem | DirectoryItem | FileItem;
+
+const RegexSearchPanel = ({ projectId, isRegexEnabled }: Props) => {
+ const { t } = useTranslation();
+ const [inputValue, setInputValue] = useState('');
+ // const [options, setOptions] = useState([]);
+ const [results, setResults] = useState>({});
+ const [resultsRaw, setResultsRaw] = useState([]);
+ const inputRef = useRef(null);
+ const { setIsRegexSearchEnabled } = useContext(ProjectContext.RegexSearch);
+ const { isVisible } = useContext(CommandBarContext.General);
+ const [focusedIndex, setFocusedIndex] = useState(-1);
+
+ const onChange = useCallback((e: ChangeEvent) => {
+ setInputValue(e.target.value);
+ setFocusedIndex(-1);
+ }, []);
+
+ const onClear = useCallback(() => {
+ setInputValue('');
+ if (!inputValue) {
+ setIsRegexSearchEnabled(false);
+ }
+ }, [inputValue]);
+
+ // const {
+ // isOpen,
+ // getMenuProps,
+ // getInputProps,
+ // getItemProps,
+ // closeMenu,
+ // highlightedIndex,
+ // } = useCombobox({
+ // inputValue,
+ // onStateChange: async (state) => {
+ // if (
+ // state.type === useCombobox.stateChangeTypes.ItemClick ||
+ // state.type === useCombobox.stateChangeTypes.InputKeyDownEnter
+ // ) {
+ // if (state.selectedItem?.type === ResultItemType.FLAG) {
+ // const words = inputValue.split(' ');
+ // words[words.length - 1] =
+ // state.selectedItem?.data || words[words.length - 1];
+ // const newInputValue = words.join(' ') + ':';
+ // setInputValue(newInputValue);
+ // } else if (state.selectedItem?.type === ResultItemType.LANG) {
+ // setInputValue(
+ // (prev) =>
+ // prev.split(':').slice(0, -1).join(':') +
+ // ':' +
+ // (state.selectedItem as LangResult)?.data,
+ // );
+ // } else {
+ // if (
+ // state.selectedItem?.type === ResultItemType.FILE ||
+ // state.selectedItem?.type === ResultItemType.CODE
+ // ) {
+ // openNewTab({
+ // type: TabTypesEnum.FILE,
+ // branch: null,
+ // repoRef: state.selectedItem.repoRef,
+ // path: state.selectedItem.relativePath,
+ // });
+ // }
+ // }
+ // inputRef.current?.focus();
+ // } else if (state.type === useCombobox.stateChangeTypes.InputChange) {
+ // if (state.inputValue === '') {
+ // setInputValue(state.inputValue);
+ // setOptions([]);
+ // return;
+ // }
+ // if (!state.inputValue) {
+ // return;
+ // }
+ // let autocompleteQuery = state.inputValue;
+ // getAutocompleteThrottled(autocompleteQuery, setOptions);
+ // }
+ // },
+ // items: options,
+ // itemToString(item) {
+ // return (
+ // (item?.type === ResultItemType.FLAG ||
+ // item?.type === ResultItemType.LANG
+ // ? item?.data
+ // : '') || ''
+ // );
+ // },
+ // });
+
+ const onSubmit = useCallback(
+ async (e: FormEvent) => {
+ e.preventDefault();
+ if (projectId) {
+ const data = await search(projectId, inputValue);
+ const newResults: Record = {};
+ data.data.forEach((d) => {
+ if (!newResults[d.data.repo_ref]) {
+ newResults[d.data.repo_ref] = [d];
+ } else {
+ newResults[d.data.repo_ref].push(d);
+ }
+ });
+ setResults(newResults);
+ setResultsRaw(data.data);
+ // closeMenu();
+ }
+ },
+ [inputValue],
+ );
+
+ const handleKeyEvent = useCallback(
+ (e: KeyboardEvent) => {
+ if (e.key === 'Escape') {
+ e.preventDefault();
+ e.stopPropagation();
+ inputRef.current?.blur();
+ } else if (e.key === 'ArrowDown' && resultsRaw.length) {
+ e.preventDefault();
+ e.stopPropagation();
+ setFocusedIndex((prev) =>
+ prev < resultsRaw.length - 1 ? prev + 1 : -1,
+ );
+ } else if (e.key === 'ArrowUp' && resultsRaw.length) {
+ e.preventDefault();
+ e.stopPropagation();
+ setFocusedIndex((prev) =>
+ prev > -1 ? prev - 1 : resultsRaw.length - 1,
+ );
+ }
+ },
+ [resultsRaw],
+ );
+ useKeyboardNavigation(handleKeyEvent, isVisible || !isRegexEnabled);
+
+ return !isRegexEnabled ? null : (
+ ) => {
+ setName(e.target.value);
+ }, []);
+
+ const handleSubmit = useCallback(async () => {
+ if (project?.id && name) {
+ await updateProject(project?.id, { name });
+ refreshCurrentProject();
+ }
+ }, [project?.id, name, refreshCurrentProject]);
+
+ const handleDelete = useCallback(async () => {
+ if (project?.id) {
+ await deleteProject(project?.id);
+ if (projects.length > 1) {
+ setCurrentProjectId(
+ projects.find((p) => p.id !== project.id)?.id || '',
+ );
+ }
+ refreshAllProjects();
+ refreshCurrentProject();
+ setProjectSettingsOpen(false);
+ }
+ }, [project?.id, projects, refreshCurrentProject]);
+
+ return (
+
);
};
-export default Badge;
+
+export default memo(Badge);
diff --git a/client/src/components/Breadcrumbs/BreadcrumbSection.tsx b/client/src/components/Breadcrumbs/BreadcrumbSection.tsx
index aa159ad025..2a62f08b09 100644
--- a/client/src/components/Breadcrumbs/BreadcrumbSection.tsx
+++ b/client/src/components/Breadcrumbs/BreadcrumbSection.tsx
@@ -1,4 +1,4 @@
-import { MouseEvent, ReactElement } from 'react';
+import { memo, MouseEvent, ReactElement, useCallback } from 'react';
import { Range } from '../../types/results';
type HighlightedString = {
@@ -44,7 +44,7 @@ const BreadcrumbSection = ({
limitSectionWidth,
nonInteractive,
}: Props) => {
- const getHighlight = () => {
+ const getHighlight = useCallback(() => {
if (highlight) {
const left = label.substring(0, highlight.start);
const search = label.substring(highlight.start, highlight.end + 1);
@@ -60,7 +60,7 @@ const BreadcrumbSection = ({
);
}
return label;
- };
+ }, [highlight, label]);
return (
@@ -39,10 +31,12 @@ const SelfServe = ({ activeTab }: Props) => {
-
);
};
diff --git a/client/src/pages/Onboarding/index.tsx b/client/src/Onboarding/index.tsx
similarity index 78%
rename from client/src/pages/Onboarding/index.tsx
rename to client/src/Onboarding/index.tsx
index 26ba24d1c5..ab1d64bbc9 100644
--- a/client/src/pages/Onboarding/index.tsx
+++ b/client/src/Onboarding/index.tsx
@@ -1,13 +1,14 @@
import React, { memo, useCallback, useContext, useEffect } from 'react';
-import { UIContext } from '../../context/uiContext';
-import { DeviceContext } from '../../context/deviceContext';
+import { UIContext } from '../context/uiContext';
+import { DeviceContext } from '../context/deviceContext';
import {
getPlainFromStorage,
ONBOARDING_DONE_KEY,
REFRESH_TOKEN_KEY,
savePlainToStorage,
-} from '../../services/storage';
-import { getConfig, refreshToken } from '../../services/api';
+} from '../services/storage';
+import { getConfig, refreshToken } from '../services/api';
+import { EnvContext } from '../context/envContext';
import SelfServe from './SelfServe';
import Desktop from './Desktop';
@@ -18,11 +19,12 @@ export type Form = {
emailError: string | null;
};
-const Onboarding = ({ activeTab }: { activeTab: string }) => {
+const Onboarding = () => {
const { shouldShowWelcome, setShouldShowWelcome } = useContext(
UIContext.Onboarding,
);
- const { isSelfServe, setEnvConfig, envConfig } = useContext(DeviceContext);
+ const { isSelfServe } = useContext(DeviceContext);
+ const { setEnvConfig, envConfig } = useContext(EnvContext);
const closeOnboarding = useCallback(() => {
setShouldShowWelcome(false);
@@ -71,9 +73,9 @@ const Onboarding = ({ activeTab }: { activeTab: string }) => {
return shouldShowWelcome ? (
isSelfServe ? (
-
+
+
+
+ );
+};
+
+export default memo(ActionsDropdown);
diff --git a/client/src/Project/CurrentTabContent/ChatTab/ChatPersistentState.tsx b/client/src/Project/CurrentTabContent/ChatTab/ChatPersistentState.tsx
new file mode 100644
index 0000000000..ec7bbe885e
--- /dev/null
+++ b/client/src/Project/CurrentTabContent/ChatTab/ChatPersistentState.tsx
@@ -0,0 +1,628 @@
+import {
+ memo,
+ useCallback,
+ useContext,
+ useEffect,
+ useRef,
+ useState,
+} from 'react';
+import { useTranslation } from 'react-i18next';
+import { DeviceContext } from '../../../context/deviceContext';
+import { ProjectContext } from '../../../context/projectContext';
+import {
+ ChatMessage,
+ ChatMessageAuthor,
+ ChatMessageServer,
+ ChatMessageUser,
+ ChatTabType,
+ InputValueType,
+ ParsedQueryType,
+ ParsedQueryTypeEnum,
+ TabTypesEnum,
+} from '../../../types/general';
+import { conversationsCache } from '../../../services/cache';
+import { mapLoadingSteps, mapUserQuery } from '../../../mappers/conversation';
+import { focusInput } from '../../../utils/domUtils';
+import { ChatsContext } from '../../../context/chatsContext';
+import { TabsContext } from '../../../context/tabsContext';
+import { getConversation } from '../../../services/api';
+
+type Options = {
+ path: string;
+ lines: [number, number];
+ repoRef: string;
+ branch?: string | null;
+};
+
+type Props = {
+ tabKey: string;
+ tabTitle?: string;
+ conversationId?: string;
+ initialQuery?: Options;
+ side: 'left' | 'right';
+};
+
+const ChatPersistentState = ({
+ tabKey,
+ tabTitle,
+ side,
+ initialQuery,
+ conversationId: convId,
+}: Props) => {
+ const { t } = useTranslation();
+ const { apiUrl } = useContext(DeviceContext);
+ const { project, refreshCurrentProjectConversations } = useContext(
+ ProjectContext.Current,
+ );
+ const { preferredAnswerSpeed } = useContext(ProjectContext.AnswerSpeed);
+ const { setChats } = useContext(ChatsContext);
+ const { openNewTab, updateTabProperty } = useContext(TabsContext.Handlers);
+
+ const prevEventSource = useRef
+
+
+
+
+ );
+};
+
+export default memo(Conversation);
diff --git a/client/src/Project/CurrentTabContent/ChatTab/DeprecatedClientModal.tsx b/client/src/Project/CurrentTabContent/ChatTab/DeprecatedClientModal.tsx
new file mode 100644
index 0000000000..1c47a51a7d
--- /dev/null
+++ b/client/src/Project/CurrentTabContent/ChatTab/DeprecatedClientModal.tsx
@@ -0,0 +1,68 @@
+import { useContext } from 'react';
+import { Trans, useTranslation } from 'react-i18next';
+import { CloseSignIcon } from '../../../icons';
+import { DeviceContext } from '../../../context/deviceContext';
+import Button from '../../../components/Button';
+import Modal from '../../../components/Modal';
+
+type Props = {
+ isOpen: boolean;
+ onClose: () => void;
+};
+
+const DeprecatedClientModal = ({ isOpen, onClose }: Props) => {
+ const { t } = useTranslation();
+ const { openLink, relaunch } = useContext(DeviceContext);
+ return (
+
+
+
+
+
+
+
+
+
+ Update Required
+
+
+
+
+
+
+
+
+
+
+ {children}
; +} + +const reactNodeViews: Record' +
+ items
+ .map(
+ (i) =>
+ `
'
+ );
+ },
+ }),
+ [],
+ );
+
+ const plugins = useMemo(() => {
+ return [
+ placeholderPlugin(placeholder),
+ react(),
+ mentionPlugin,
+ keymap({
+ ...baseKeymap,
+ Escape: (state) => {
+ const key = Object.keys(state).find((k) =>
+ k.startsWith('autosuggestions'),
+ );
+
+ // @ts-ignore
+ if (key && state[key]?.active) {
+ return true;
+ }
+ blurInput();
+ return true;
+ },
+ Enter: (state) => {
+ const key = Object.keys(state).find((k) =>
+ k.startsWith('autosuggestions'),
+ );
+ // @ts-ignore
+ if (key && state[key]?.active) {
+ return false;
+ }
+ const parts = state.toJSON().doc.content[0]?.content;
+ // trying to submit with no text
+ if (!parts) {
+ return false;
+ }
+ onSubmit?.(mapEditorContentToInputValue(parts));
+ return true;
+ },
+ 'Ctrl-Enter': baseKeymap.Enter,
+ 'Cmd-Enter': baseKeymap.Enter,
+ 'Shift-Enter': baseKeymap.Enter,
+ }),
+ ];
+ }, [onSubmit]);
+
+ const { nodeViews, renderNodeViews } = useNodeViews(reactNodeViews);
+ const [mount, setMount] = useState${
+ i.isFirst
+ ? `
`,
+ )
+ .join('') +
+ '
+ ${t(
+ i.type === 'repo'
+ ? 'Repositories'
+ : i.type === 'dir'
+ ? 'Directories'
+ : i.type === 'lang'
+ ? 'Languages'
+ : 'Files',
+ )}
+
`
+ : ''
+ }${
+ i.type === 'repo'
+ ? ``
+ : i.type === 'dir'
+ ? ``
+ : ``
+ }${i.display}
+
+
+ {renderNodeViews()}
+
+
+ );
+};
+
+export default memo(InputCore);
diff --git a/client/src/Project/CurrentTabContent/ChatTab/Input/index.tsx b/client/src/Project/CurrentTabContent/ChatTab/Input/index.tsx
new file mode 100644
index 0000000000..d5181c69be
--- /dev/null
+++ b/client/src/Project/CurrentTabContent/ChatTab/Input/index.tsx
@@ -0,0 +1,280 @@
+import {
+ Dispatch,
+ memo,
+ SetStateAction,
+ useCallback,
+ useContext,
+ useEffect,
+ useRef,
+ useState,
+} from 'react';
+import { Trans, useTranslation } from 'react-i18next';
+import { EnvContext } from '../../../../context/envContext';
+import {
+ ChatMessage,
+ ChatMessageServer,
+ InputEditorContent,
+ ParsedQueryType,
+} from '../../../../types/general';
+import { getAutocomplete } from '../../../../services/api';
+import { FileResItem, LangItem, RepoItem } from '../../../../types/api';
+import useKeyboardNavigation from '../../../../hooks/useKeyboardNavigation';
+import KeyboardHint from '../../../../components/KeyboardHint';
+import { focusInput } from '../../../../utils/domUtils';
+import InputCore from './InputCore';
+import { mapEditorContentToInputValue } from './utils';
+
+type Props = {
+ value?: { parsed: ParsedQueryType[]; plain: string };
+ valueToEdit?: Record
+
+ );
+};
+
+export default memo(ConversationInput);
diff --git a/client/src/Project/CurrentTabContent/ChatTab/Input/mentionPlugin.ts b/client/src/Project/CurrentTabContent/ChatTab/Input/mentionPlugin.ts
new file mode 100644
index 0000000000..9aa90f33c3
--- /dev/null
+++ b/client/src/Project/CurrentTabContent/ChatTab/Input/mentionPlugin.ts
@@ -0,0 +1,401 @@
+import { Plugin, PluginKey } from 'prosemirror-state';
+import { Decoration, DecorationSet, EditorView } from 'prosemirror-view';
+import { ResolvedPos } from 'prosemirror-model';
+
+export function getRegexp(mentionTrigger: string, allowSpace?: boolean) {
+ return allowSpace
+ ? new RegExp('(^|\\s)' + mentionTrigger + '([\\w-\\+]*\\s?[\\w-\\+.]*)$')
+ : new RegExp('(^|\\s)' + mentionTrigger + '([\\w-\\+.]*)$');
+}
+
+const insertAfterSelect = String.fromCharCode(160);
+
+export function getMatch(
+ $position: ResolvedPos,
+ opts: {
+ mentionTrigger: string;
+ allowSpace?: boolean;
+ },
+) {
+ try {
+ // take current para text content upto cursor start.
+ // this makes the regex simpler and parsing the matches easier.
+ const parastart = $position.before();
+ const text = $position.doc.textBetween(
+ parastart,
+ $position.pos,
+ '\n',
+ '\0',
+ );
+
+ const regex = getRegexp(opts.mentionTrigger, opts.allowSpace);
+
+ const match = text.match(regex);
+
+ // if match found, return match with useful information.
+ if (match) {
+ // adjust match.index to remove the matched extra space
+ match.index =
+ match[0].startsWith(' ') || match[0].startsWith(insertAfterSelect)
+ ? (match.index || 0) + 1
+ : match.index;
+ match[0] =
+ match[0].startsWith(' ') || match[0].startsWith(insertAfterSelect)
+ ? match[0].substring(1, match[0].length)
+ : match[0];
+
+ // The absolute position of the match in the document
+ const from = $position.start() + match.index!;
+ const to = from + match[0].length;
+
+ const queryText = match[2];
+
+ return {
+ range: { from: from, to: to },
+ queryText: queryText,
+ type: 'mention',
+ };
+ }
+ // else if no match don't return anything.
+ } catch (e) {
+ console.log(e);
+ }
+}
+
+/**
+ * Util to debounce call to a function.
+ * >>> debounce(function(){}, 1000, this)
+ */
+export const debounce = (function () {
+ let timeoutId: number;
+ return function (func: () => void, timeout: number, context: any): number {
+ // @ts-ignore
+ context = context || this;
+ clearTimeout(timeoutId);
+ timeoutId = window.setTimeout(function () {
+ // @ts-ignore
+ func.apply(context, arguments);
+ }, timeout);
+
+ return timeoutId;
+ };
+})();
+
+type State = {
+ active: boolean;
+ range: {
+ from: number;
+ to: number;
+ };
+ type: string;
+ text: string;
+ suggestions: Record
+ 
+
+
+
+
+
+ {isStoppable && (
+
+ )}
+ {!!queryIdToEdit && (
+
+ )}
+
+
+ ' +
+ items
+ .map((i) => '
',
+ activeClass: 'suggestion-item-active',
+ suggestionTextClass: 'prosemirror-suggestion',
+ maxNoOfSuggestions: 10,
+ delay: 500,
+ };
+
+ const options = Object.assign({}, defaultOpts, opts) as Options;
+
+ // timeoutId for clearing debounced calls
+ let showListTimeoutId: number;
+
+ // dropdown element
+ const el = document.createElement('div');
+
+ const showList = function (
+ view: EditorView,
+ state: State,
+ suggestions: Record' + i.name + '
')
+ .join('') +
+ '
+ {type === 'proc' ? t('Reading ') : displayText}
+ {type === 'proc' ? (
+
+ );
+};
+
+export default memo(LoadingStep);
diff --git a/client/src/components/Chat/ChatBody/ConversationMessage/UserParsedQuery/LangChip.tsx b/client/src/Project/CurrentTabContent/ChatTab/Message/UserParsedQuery/LangChip.tsx
similarity index 76%
rename from client/src/components/Chat/ChatBody/ConversationMessage/UserParsedQuery/LangChip.tsx
rename to client/src/Project/CurrentTabContent/ChatTab/Message/UserParsedQuery/LangChip.tsx
index 9890d58315..102ded050a 100644
--- a/client/src/components/Chat/ChatBody/ConversationMessage/UserParsedQuery/LangChip.tsx
+++ b/client/src/Project/CurrentTabContent/ChatTab/Message/UserParsedQuery/LangChip.tsx
@@ -1,5 +1,5 @@
-import FileIcon from '../../../../FileIcon';
import { getFileExtensionForLang } from '../../../../../utils';
+import FileIcon from '../../../../../components/FileIcon';
type Props = {
lang: string;
@@ -8,7 +8,7 @@ type Props = {
const LangChip = ({ lang }: Props) => {
return (
diff --git a/client/src/components/Chat/ChatBody/ConversationMessage/UserParsedQuery/PathChip.tsx b/client/src/Project/CurrentTabContent/ChatTab/Message/UserParsedQuery/PathChip.tsx
similarity index 71%
rename from client/src/components/Chat/ChatBody/ConversationMessage/UserParsedQuery/PathChip.tsx
rename to client/src/Project/CurrentTabContent/ChatTab/Message/UserParsedQuery/PathChip.tsx
index f34ccfe25e..ff337ccea4 100644
--- a/client/src/components/Chat/ChatBody/ConversationMessage/UserParsedQuery/PathChip.tsx
+++ b/client/src/Project/CurrentTabContent/ChatTab/Message/UserParsedQuery/PathChip.tsx
@@ -1,6 +1,6 @@
import { useMemo } from 'react';
-import { FolderClosed, ArrowOut } from '../../../../../icons';
-import FileIcon from '../../../../FileIcon';
+import { FolderIcon } from '../../../../../icons';
+import FileIcon from '../../../../../components/FileIcon';
import { splitPath } from '../../../../../utils';
type Props = {
@@ -11,12 +11,12 @@ const PathChip = ({ path }: Props) => {
const isFolder = useMemo(() => path.endsWith('/'), [path]);
return (
{isFolder ? (
-
+
{parsedQuery
? parsedQuery.map((p, i) =>
p.type === ParsedQueryTypeEnum.TEXT ? (
@@ -22,10 +23,12 @@ const UserParsedQuery = ({ textQuery, parsedQuery }: Props) => {
+
);
};
diff --git a/client/src/Project/CurrentTabContent/ChatTab/Message/index.tsx b/client/src/Project/CurrentTabContent/ChatTab/Message/index.tsx
new file mode 100644
index 0000000000..5df2e3aae2
--- /dev/null
+++ b/client/src/Project/CurrentTabContent/ChatTab/Message/index.tsx
@@ -0,0 +1,259 @@
+import { memo, useCallback, useContext, useEffect, useState } from 'react';
+import { Trans, useTranslation } from 'react-i18next';
+import { format } from 'date-fns';
+import {
+ ChatLoadingStep,
+ ChatMessageAuthor,
+ ParsedQueryType,
+} from '../../../../types/general';
+import { EnvContext } from '../../../../context/envContext';
+import MarkdownWithCode from '../../../../components/MarkdownWithCode';
+import Button from '../../../../components/Button';
+import {
+ CheckListIcon,
+ LikeIcon,
+ PencilIcon,
+ UnlikeIcon,
+ WarningSignIcon,
+} from '../../../../icons';
+import { getDateFnsLocale } from '../../../../utils';
+import SpinLoaderContainer from '../../../../components/Loaders/SpinnerLoader';
+import {
+ getPlainFromStorage,
+ LOADING_STEPS_SHOWN_KEY,
+ savePlainToStorage,
+} from '../../../../services/storage';
+import { LocaleContext } from '../../../../context/localeContext';
+import { upvoteAnswer } from '../../../../services/api';
+import CopyButton from '../../../../components/MarkdownWithCode/CopyButton';
+import UserParsedQuery from './UserParsedQuery';
+import LoadingStep from './LoadingStep';
+
+type Props = {
+ author: ChatMessageAuthor;
+ text: string;
+ parsedQuery?: ParsedQueryType[];
+ error?: string;
+ threadId: string;
+ queryId: string;
+ responseTimestamp: string | null;
+ showInlineFeedback: boolean;
+ isLoading?: boolean;
+ loadingSteps?: ChatLoadingStep[];
+ i: number;
+ onMessageEdit: (queryId: string, i: number) => void;
+ singleFileExplanation?: boolean;
+ side: 'left' | 'right';
+ projectId: string;
+};
+
+const ConversationMessage = ({
+ author,
+ text,
+ parsedQuery,
+ i,
+ queryId,
+ onMessageEdit,
+ singleFileExplanation,
+ threadId,
+ isLoading,
+ loadingSteps,
+ showInlineFeedback,
+ responseTimestamp,
+ error,
+ side,
+ projectId,
+}: Props) => {
+ const { t } = useTranslation();
+ const { envConfig } = useContext(EnvContext);
+ const { locale } = useContext(LocaleContext);
+ const [isUpvote, setIsUpvote] = useState(false);
+ const [isDownvote, setIsDownvote] = useState(false);
+ const [isLoadingStepsShown, setLoadingStepsShown] = useState(
+ getPlainFromStorage(LOADING_STEPS_SHOWN_KEY)
+ ? !!Number(getPlainFromStorage(LOADING_STEPS_SHOWN_KEY))
+ : true,
+ );
+
+ useEffect(() => {
+ savePlainToStorage(
+ LOADING_STEPS_SHOWN_KEY,
+ isLoadingStepsShown ? '1' : '0',
+ );
+ }, [isLoadingStepsShown]);
+
+ const toggleStepsShown = useCallback(() => {
+ setLoadingStepsShown((prev) => !prev);
+ }, []);
+
+ const handleEdit = useCallback(() => {
+ onMessageEdit(queryId, i);
+ }, [onMessageEdit, queryId, i]);
+
+ const handleUpvote = useCallback(() => {
+ setIsUpvote(true);
+ setIsDownvote(false);
+ return upvoteAnswer(projectId, threadId, queryId, { type: 'positive' });
+ }, [showInlineFeedback, envConfig.tracking_id, threadId, queryId, projectId]);
+
+ const handleDownvote = useCallback(() => {
+ setIsUpvote(false);
+ setIsDownvote(true);
+ return upvoteAnswer(projectId, threadId, queryId, {
+ type: 'negative',
+ feedback: '',
+ });
+ }, [showInlineFeedback, envConfig.tracking_id, threadId, queryId, projectId]);
+
+ return (
+
+ {error ? (
+
+ );
+};
+
+export default memo(ConversationMessage);
diff --git a/client/src/Project/CurrentTabContent/ChatTab/ScrollableContent.tsx b/client/src/Project/CurrentTabContent/ChatTab/ScrollableContent.tsx
new file mode 100644
index 0000000000..433584f181
--- /dev/null
+++ b/client/src/Project/CurrentTabContent/ChatTab/ScrollableContent.tsx
@@ -0,0 +1,90 @@
+import { Fragment, memo, useEffect } from 'react';
+import { Trans } from 'react-i18next';
+import { useScrollToBottom } from 'react-scroll-to-bottom';
+import { ChatMessageAuthor, ChatMessageServer } from '../../../types/general';
+import { WarningSignIcon } from '../../../icons';
+import { ChatContext } from '../../../context/chatsContext';
+import StarterMessage from './StarterMessage';
+import Message from './Message';
+
+type Props = {
+ chatData: ChatContext;
+ side: 'left' | 'right';
+ projectId: string;
+};
+
+const ScrollableContent = ({ chatData, side, projectId }: Props) => {
+ const scroll = useScrollToBottom();
+
+ useEffect(() => {
+ if (chatData.submittedQuery.plain) {
+ scroll({ behavior: 'smooth' });
+ }
+ }, [chatData.submittedQuery]);
+
+ return (
+
+
+ ) : (
+ <>
+
+
+ {error}
+
+
+
+ {author === ChatMessageAuthor.User ? (
+
+ ) : isLoading ? (
+ ![bloop]()
+ )}
+
+ {(isUpvote || isDownvote) && (
+
+ {isUpvote ? (
+
+ )}
+
+
+
+ {author === ChatMessageAuthor.User ? You : 'bloop'}
+ {author === ChatMessageAuthor.Server && (
+
+ {!!loadingSteps?.length && (
+
+ ·{' '}
+ {isLoading ? (
+
+ {loadingSteps.map((s, i) => (
+
+ )}
+
+ {author === ChatMessageAuthor.Server ? (
+
+
+ {author === ChatMessageAuthor.User ? (
+
+ ) : (
+ !isLoading && (
+ <>
+
+
+
+ )
+ )}
+
+
+ )}
+
+
+ )}
+
+
+
+
+
+ );
+};
+
+export default memo(StarterMessage);
diff --git a/client/src/Project/CurrentTabContent/ChatTab/index.tsx b/client/src/Project/CurrentTabContent/ChatTab/index.tsx
new file mode 100644
index 0000000000..3a5eae4aa7
--- /dev/null
+++ b/client/src/Project/CurrentTabContent/ChatTab/index.tsx
@@ -0,0 +1,134 @@
+import React, {
+ memo,
+ useCallback,
+ useContext,
+ useEffect,
+ useMemo,
+} from 'react';
+import { useTranslation } from 'react-i18next';
+import Button from '../../../components/Button';
+import {
+ ChatBubblesIcon,
+ MoreHorizontalIcon,
+ SplitViewIcon,
+} from '../../../icons';
+import Dropdown from '../../../components/Dropdown';
+import { checkEventKeys } from '../../../utils/keyboardUtils';
+import useKeyboardNavigation from '../../../hooks/useKeyboardNavigation';
+import { TabsContext } from '../../../context/tabsContext';
+import { ChatTabType } from '../../../types/general';
+import { ProjectContext } from '../../../context/projectContext';
+import { CommandBarContext } from '../../../context/commandBarContext';
+import { openInSplitViewShortcut } from '../../../consts/commandBar';
+import Conversation from './Conversation';
+import ActionsDropdown from './ActionsDropdown';
+
+type Props = ChatTabType & {
+ noBorder?: boolean;
+ side: 'left' | 'right';
+ tabKey: string;
+ handleMoveToAnotherSide: () => void;
+};
+
+const ChatTab = ({
+ noBorder,
+ side,
+ title,
+ conversationId,
+ tabKey,
+ handleMoveToAnotherSide,
+}: Props) => {
+ const { t } = useTranslation();
+ const { focusedPanel } = useContext(TabsContext.All);
+ const { closeTab } = useContext(TabsContext.Handlers);
+ const { setFocusedTabItems } = useContext(CommandBarContext.Handlers);
+ const { project, refreshCurrentProjectConversations } = useContext(
+ ProjectContext.Current,
+ );
+
+ const dropdownComponentProps = useMemo(() => {
+ return {
+ handleMoveToAnotherSide,
+ conversationId,
+ projectId: project?.id,
+ tabKey,
+ closeTab,
+ refreshCurrentProjectConversations,
+ side,
+ };
+ }, [
+ handleMoveToAnotherSide,
+ conversationId,
+ closeTab,
+ project?.id,
+ tabKey,
+ refreshCurrentProjectConversations,
+ side,
+ ]);
+
+ const handleKeyEvent = useCallback(
+ (e: KeyboardEvent) => {
+ if (checkEventKeys(e, ['cmd', ']'])) {
+ handleMoveToAnotherSide();
+ }
+ },
+ [handleMoveToAnotherSide],
+ );
+ useKeyboardNavigation(handleKeyEvent, focusedPanel !== side);
+
+ useEffect(() => {
+ if (focusedPanel === side) {
+ setFocusedTabItems([
+ {
+ label: t('Open in split view'),
+ Icon: SplitViewIcon,
+ id: 'split_view',
+ key: 'split_view',
+ onClick: handleMoveToAnotherSide,
+ closeOnClick: true,
+ shortcut: openInSplitViewShortcut,
+ footerHint: '',
+ footerBtns: [{ label: t('Move'), shortcut: ['entr'] }],
+ },
+ ]);
+ }
+ }, [focusedPanel, side, handleMoveToAnotherSide]);
+
+ return (
+
+ ![bloop]()
+
+
+
+ bloop
+
+
+
+ {tutorials.map((t, i) => (
+
+ ))}
+
+ )}
+
+
+ );
+};
+
+export default memo(ChatTab);
diff --git a/client/src/Project/CurrentTabContent/DropTarget.tsx b/client/src/Project/CurrentTabContent/DropTarget.tsx
new file mode 100644
index 0000000000..230d849c44
--- /dev/null
+++ b/client/src/Project/CurrentTabContent/DropTarget.tsx
@@ -0,0 +1,54 @@
+import { memo } from 'react';
+import { useDrop } from 'react-dnd';
+import { Trans, useTranslation } from 'react-i18next';
+import { TabType } from '../../types/general';
+import { SplitViewIcon } from '../../icons';
+
+type Props = {
+ onDrop: (t: TabType) => void;
+};
+
+const DropTarget = ({ onDrop }: Props) => {
+ useTranslation();
+ const [{ isOver, canDrop }, drop] = useDrop(
+ () => ({
+ accept: 'tab-left',
+ drop: (item: { t: TabType }, monitor) => {
+ console.log('drop', item);
+ onDrop(item.t);
+ },
+ collect: (monitor) => {
+ return {
+ isOver: !!monitor.isOver(),
+ canDrop: !!monitor.canDrop(),
+ };
+ },
+ }),
+ [onDrop],
+ );
+
+ return (
+
+
+
+
+
+
+
+
+
+
+ {isOver && canDrop && (
+
+ );
+};
+
+export default memo(DropTarget);
diff --git a/client/src/Project/CurrentTabContent/EmptyTab.tsx b/client/src/Project/CurrentTabContent/EmptyTab.tsx
new file mode 100644
index 0000000000..526967038c
--- /dev/null
+++ b/client/src/Project/CurrentTabContent/EmptyTab.tsx
@@ -0,0 +1,37 @@
+import { memo } from 'react';
+import { Trans, useTranslation } from 'react-i18next';
+import useShortcuts from '../../hooks/useShortcuts';
+
+type Props = {};
+
+const EmptyTab = ({}: Props) => {
+ useTranslation();
+ const shortcut = useShortcuts(['cmd']);
+ return (
+
+
+
+ )}
+
+
+
+
+
+
+
+ );
+};
+
+export default memo(EmptyTab);
diff --git a/client/src/Project/CurrentTabContent/FileTab/ActionsDropdown.tsx b/client/src/Project/CurrentTabContent/FileTab/ActionsDropdown.tsx
new file mode 100644
index 0000000000..d885f0a85a
--- /dev/null
+++ b/client/src/Project/CurrentTabContent/FileTab/ActionsDropdown.tsx
@@ -0,0 +1,39 @@
+import { memo, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import DropdownSection from '../../../components/Dropdown/Section';
+import SectionItem from '../../../components/Dropdown/Section/SectionItem';
+import { SplitViewIcon, FileWithSparksIcon } from '../../../icons';
+import { openInSplitViewShortcut } from '../../../consts/commandBar';
+import { explainFileShortcut } from './index';
+
+type Props = {
+ handleExplain: () => void;
+ handleMoveToAnotherSide: () => void;
+};
+
+const ActionsDropdown = ({ handleExplain, handleMoveToAnotherSide }: Props) => {
+ const { t } = useTranslation();
+
+ return (
+
+ ![bloop]()
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default memo(ActionsDropdown);
diff --git a/client/src/Project/CurrentTabContent/FileTab/index.tsx b/client/src/Project/CurrentTabContent/FileTab/index.tsx
new file mode 100644
index 0000000000..28812c3b27
--- /dev/null
+++ b/client/src/Project/CurrentTabContent/FileTab/index.tsx
@@ -0,0 +1,332 @@
+import React, {
+ memo,
+ useCallback,
+ useContext,
+ useEffect,
+ useMemo,
+ useRef,
+ useState,
+ useTransition,
+} from 'react';
+import { Trans, useTranslation } from 'react-i18next';
+import AutoSizer from 'react-virtualized-auto-sizer';
+import {
+ forceFileToBeIndexed,
+ getFileContent,
+ getHoverables,
+} from '../../../services/api';
+import FileIcon from '../../../components/FileIcon';
+import Button from '../../../components/Button';
+import {
+ EyeCutIcon,
+ FileWithSparksIcon,
+ MoreHorizontalIcon,
+ SplitViewIcon,
+} from '../../../icons';
+import { FileResponse } from '../../../types/api';
+import { mapRanges } from '../../../mappers/results';
+import { Range } from '../../../types/results';
+import CodeFull from '../../../components/Code/CodeFull';
+import IpynbRenderer from '../../../components/IpynbRenderer';
+import SpinLoaderContainer from '../../../components/Loaders/SpinnerLoader';
+import { FileTabType, SyncStatus, TabTypesEnum } from '../../../types/general';
+import { DeviceContext } from '../../../context/deviceContext';
+import { ProjectContext } from '../../../context/projectContext';
+import { FileHighlightsContext } from '../../../context/fileHighlightsContext';
+import Dropdown from '../../../components/Dropdown';
+import { TabsContext } from '../../../context/tabsContext';
+import { checkEventKeys } from '../../../utils/keyboardUtils';
+import useKeyboardNavigation from '../../../hooks/useKeyboardNavigation';
+import { CommandBarContext } from '../../../context/commandBarContext';
+import { openInSplitViewShortcut } from '../../../consts/commandBar';
+import BreadcrumbsPathContainer from '../../../components/Breadcrumbs/PathContainer';
+import ActionsDropdown from './ActionsDropdown';
+
+type Props = {
+ tabKey: string;
+ repoRef: string;
+ path: string;
+ scrollToLine?: string;
+ tokenRange?: string;
+ noBorder?: boolean;
+ branch?: string | null;
+ side: 'left' | 'right';
+ handleMoveToAnotherSide: () => void;
+};
+
+export const explainFileShortcut = ['cmd', 'E'];
+
+const FileTab = ({
+ path,
+ noBorder,
+ repoRef,
+ scrollToLine,
+ branch,
+ side,
+ tokenRange,
+ handleMoveToAnotherSide,
+ tabKey,
+}: Props) => {
+ const { t } = useTranslation();
+ const [file, setFile] = useState
+
+ );
+};
+
+export default memo(FileTab);
diff --git a/client/src/Project/CurrentTabContent/Header/AddTabButton.tsx b/client/src/Project/CurrentTabContent/Header/AddTabButton.tsx
new file mode 100644
index 0000000000..f78e183073
--- /dev/null
+++ b/client/src/Project/CurrentTabContent/Header/AddTabButton.tsx
@@ -0,0 +1,64 @@
+import React, { memo, useCallback, useContext } from 'react';
+import { useTranslation } from 'react-i18next';
+import { PlusSignIcon } from '../../../icons';
+import Button from '../../../components/Button';
+import { checkEventKeys } from '../../../utils/keyboardUtils';
+import { TabTypesEnum } from '../../../types/general';
+import useKeyboardNavigation from '../../../hooks/useKeyboardNavigation';
+import { TabsContext } from '../../../context/tabsContext';
+
+type Props = {
+ tabsLength: number;
+ side: 'left' | 'right';
+ focusedPanel: 'left' | 'right';
+};
+
+const newTabShortcut = ['option', 'N'];
+
+const AddTabButton = ({ side, focusedPanel }: Props) => {
+ const { t } = useTranslation();
+ const { openNewTab } = useContext(TabsContext.Handlers);
+
+ // const dropdownComponentProps = useMemo(() => {
+ // return { side };
+ // }, [side]);
+
+ const openChatTab = useCallback(() => {
+ openNewTab({ type: TabTypesEnum.CHAT }, side);
+ }, [openNewTab, side]);
+
+ const handleKeyEvent = useCallback(
+ (e: KeyboardEvent) => {
+ if (checkEventKeys(e, newTabShortcut)) {
+ e.stopPropagation();
+ e.preventDefault();
+ openChatTab();
+ }
+ },
+ [openNewTab],
+ );
+ useKeyboardNavigation(handleKeyEvent, side !== focusedPanel);
+
+ return (
+ //
+
+
+
+
+
+
+
+ {file?.lang === 'jupyter notebook' ? (
+
+ {({ width, height }) => (
+
+ ) : isFetched && !file ? (
+
+
+
+ ) : null}
+
+
+
+
+ {!indexRequested ? (
+
+ ) : (
+
+
+
+
+ )}
+
+
+ );
+};
+
+export default memo(AddTabDropdown);
diff --git a/client/src/Project/CurrentTabContent/Header/TabButton.tsx b/client/src/Project/CurrentTabContent/Header/TabButton.tsx
new file mode 100644
index 0000000000..caee41fd65
--- /dev/null
+++ b/client/src/Project/CurrentTabContent/Header/TabButton.tsx
@@ -0,0 +1,211 @@
+import React, {
+ memo,
+ MouseEvent,
+ useCallback,
+ useContext,
+ useRef,
+} from 'react';
+import { useTranslation } from 'react-i18next';
+import { useDrag, useDrop } from 'react-dnd';
+import {
+ DraggableTabItem,
+ TabType,
+ TabTypesEnum,
+} from '../../../types/general';
+import FileIcon from '../../../components/FileIcon';
+import { splitPath } from '../../../utils';
+import Button from '../../../components/Button';
+import { ChatBubblesIcon, CloseSignIcon } from '../../../icons';
+import { TabsContext } from '../../../context/tabsContext';
+
+type Props = TabType & {
+ tabKey: string;
+ isActive: boolean;
+ side: 'left' | 'right';
+ isOnlyTab: boolean;
+ moveTab: (i: number, j: number) => void;
+ i: number;
+ repoRef?: string;
+ path?: string;
+ title?: string;
+ branch?: string | null;
+ scrollToLine?: string;
+ tokenRange?: string;
+ focusedPanel: 'left' | 'right';
+ isTemp?: boolean;
+};
+
+const closeTabShortcut = ['cmd', 'W'];
+
+const TabButton = ({
+ isActive,
+ tabKey,
+ repoRef,
+ path,
+ type,
+ title,
+ side,
+ moveTab,
+ isOnlyTab,
+ i,
+ branch,
+ scrollToLine,
+ tokenRange,
+ focusedPanel,
+ isTemp,
+}: Props) => {
+ const { t } = useTranslation();
+ const { closeTab, setActiveLeftTab, setActiveRightTab, setFocusedPanel } =
+ useContext(TabsContext.Handlers);
+ const ref = useRef
+
+ + {type === TabTypesEnum.FILE + ? splitPath(path).pop() + : title || t('New chat')} +
+ + + ); +}; + +export default memo(TabButton); diff --git a/client/src/Project/CurrentTabContent/Header/index.tsx b/client/src/Project/CurrentTabContent/Header/index.tsx new file mode 100644 index 0000000000..c1c648c33e --- /dev/null +++ b/client/src/Project/CurrentTabContent/Header/index.tsx @@ -0,0 +1,81 @@ +import React, { memo, useCallback, useContext, useMemo } from 'react'; +import HeaderRightPart from '../../../components/Header/HeaderRightPart'; +import { TabsContext } from '../../../context/tabsContext'; +import { TabTypesEnum } from '../../../types/general'; +import AddTabButton from './AddTabButton'; +import TabButton from './TabButton'; + +type Props = { + side: 'left' | 'right'; +}; + +const ProjectHeader = ({ side }: Props) => { + const { leftTabs, rightTabs, focusedPanel } = useContext(TabsContext.All); + const { tab } = useContext( + TabsContext[side === 'left' ? 'CurrentLeft' : 'CurrentRight'], + ); + const { setLeftTabs, setRightTabs } = useContext(TabsContext.Handlers); + const tabs = useMemo(() => { + return side === 'left' ? leftTabs : rightTabs; + }, [side, rightTabs, leftTabs]); + + const moveTab = useCallback( + (dragIndex: number, hoverIndex: number) => { + const action = side === 'left' ? setLeftTabs : setRightTabs; + action((prevTabs) => { + const newTabs = JSON.parse(JSON.stringify(prevTabs)); + newTabs.splice(dragIndex, 1); + const newTab = prevTabs[dragIndex]; + newTabs.splice( + hoverIndex, + 0, + newTab.type === TabTypesEnum.FILE && newTab.isTemp + ? { ...newTab, isTemp: false } + : newTab, + ); + return newTabs; + }); + }, + [side], + ); + + return ( +
+
+ );
+};
+
+export default memo(ProjectHeader);
diff --git a/client/src/Project/CurrentTabContent/index.tsx b/client/src/Project/CurrentTabContent/index.tsx
new file mode 100644
index 0000000000..c118a12910
--- /dev/null
+++ b/client/src/Project/CurrentTabContent/index.tsx
@@ -0,0 +1,109 @@
+import React, { memo, useCallback, useContext } from 'react';
+import { useDrop } from 'react-dnd';
+import { Trans } from 'react-i18next';
+import { TabsContext } from '../../context/tabsContext';
+import { DraggableTabItem, TabType, TabTypesEnum } from '../../types/general';
+import { SplitViewIcon } from '../../icons';
+import EmptyTab from './EmptyTab';
+import FileTab from './FileTab';
+import Header from './Header';
+import ChatTab from './ChatTab';
+
+type Props = {
+ side: 'left' | 'right';
+ onDrop: (t: TabType) => void;
+ moveToAnotherSide: (t: TabType) => void;
+ shouldStretch?: boolean;
+};
+
+const CurrentTabContent = ({
+ side,
+ onDrop,
+ shouldStretch,
+ moveToAnotherSide,
+}: Props) => {
+ const { tab } = useContext(
+ TabsContext[side === 'left' ? 'CurrentLeft' : 'CurrentRight'],
+ );
+ const { setFocusedPanel } = useContext(TabsContext.Handlers);
+
+ const [{ isOver, canDrop }, drop] = useDrop(
+ () => ({
+ accept: side === 'right' ? 'tab-left' : 'tab-right',
+ canDrop: (i: DraggableTabItem) => i.side !== side,
+ drop: (item: DraggableTabItem) => {
+ onDrop(item.t);
+ },
+ collect: (monitor) => ({
+ isOver: monitor.isOver(),
+ canDrop: monitor.canDrop(),
+ }),
+ }),
+ [onDrop],
+ );
+
+ const focusPanel = useCallback(() => {
+ setFocusedPanel(side);
+ }, [side]);
+
+ const handleMoveToAnotherSide = useCallback(() => {
+ if (tab) {
+ moveToAnotherSide(tab);
+ }
+ }, [moveToAnotherSide, tab]);
+
+ return (
+
+ {tabs.map(({ key, ...t }, i) => (
+
+ {(side === 'right' || !rightTabs.length) && (
+
+
+ )}
+
+
+ );
+};
+
+export default memo(CurrentTabContent);
diff --git a/client/src/Project/EmptyProject.tsx b/client/src/Project/EmptyProject.tsx
new file mode 100644
index 0000000000..2e8eeeb6e6
--- /dev/null
+++ b/client/src/Project/EmptyProject.tsx
@@ -0,0 +1,60 @@
+import React, { memo, useCallback, useContext } from 'react';
+import { Trans, useTranslation } from 'react-i18next';
+import Header from '../components/Header';
+import { PlusSignIcon, ShapesIcon } from '../icons';
+import Button from '../components/Button';
+import { CommandBarContext } from '../context/commandBarContext';
+import { CommandBarStepEnum } from '../types/general';
+import useShortcuts from '../hooks/useShortcuts';
+
+type Props = {};
+
+const EmptyProject = ({}: Props) => {
+ useTranslation();
+ const shortcut = useShortcuts(['cmd']);
+ const { setIsVisible, setChosenStep } = useContext(
+ CommandBarContext.Handlers,
+ );
+
+ const openCommandBar = useCallback(() => {
+ setChosenStep({ id: CommandBarStepEnum.MANAGE_REPOS });
+ setIsVisible(true);
+ }, []);
+
+ return (
+
+ {tab?.type === TabTypesEnum.FILE ? (
+
+
+
+ )}
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default memo(EmptyProject);
diff --git a/client/src/Project/LeftSidebar/NavPanel/Conversations.tsx b/client/src/Project/LeftSidebar/NavPanel/Conversations.tsx
new file mode 100644
index 0000000000..175a1f9dcd
--- /dev/null
+++ b/client/src/Project/LeftSidebar/NavPanel/Conversations.tsx
@@ -0,0 +1,111 @@
+import React, {
+ Dispatch,
+ memo,
+ SetStateAction,
+ useCallback,
+ useEffect,
+ useRef,
+ MouseEvent,
+ useContext,
+} from 'react';
+import { Trans, useTranslation } from 'react-i18next';
+import Dropdown from '../../../components/Dropdown';
+import {
+ ArrowTriangleBottomIcon,
+ ChatBubblesIcon,
+ MoreHorizontalIcon,
+} from '../../../icons';
+import Button from '../../../components/Button';
+import { ProjectContext } from '../../../context/projectContext';
+import ConversationsDropdown from './ConversationsDropdown';
+import ConversationEntry from './CoversationEntry';
+
+type Props = {
+ setExpanded: Dispatch
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default memo(ConversationsNav);
diff --git a/client/src/Project/LeftSidebar/NavPanel/ConversationsDropdown.tsx b/client/src/Project/LeftSidebar/NavPanel/ConversationsDropdown.tsx
new file mode 100644
index 0000000000..f6e0cd7061
--- /dev/null
+++ b/client/src/Project/LeftSidebar/NavPanel/ConversationsDropdown.tsx
@@ -0,0 +1,39 @@
+import { memo, useCallback, useContext } from 'react';
+import { useTranslation } from 'react-i18next';
+import DropdownSection from '../../../components/Dropdown/Section';
+import SectionItem from '../../../components/Dropdown/Section/SectionItem';
+import { TrashCanIcon } from '../../../icons';
+import { deleteConversation } from '../../../services/api';
+import { ProjectContext } from '../../../context/projectContext';
+
+type Props = {};
+
+const ConversationsDropdown = ({}: Props) => {
+ const { t } = useTranslation();
+ const { project, refreshCurrentProjectConversations } = useContext(
+ ProjectContext.Current,
+ );
+
+ const handleRemoveAllConversations = useCallback(async () => {
+ if (project?.id && project.conversations.length) {
+ await Promise.allSettled(
+ project.conversations.map((c) => deleteConversation(project.id, c.id)),
+ );
+ refreshCurrentProjectConversations();
+ }
+ }, [project?.id, project?.conversations]);
+
+ return (
+
+
+
+
+
+
+
+ )}
+
+
+ {project?.conversations.map((c) => (
+
+
+
+
+
+ );
+};
+
+export default memo(ConversationsDropdown);
diff --git a/client/src/Project/LeftSidebar/NavPanel/CoversationEntry.tsx b/client/src/Project/LeftSidebar/NavPanel/CoversationEntry.tsx
new file mode 100644
index 0000000000..6056e9b3c3
--- /dev/null
+++ b/client/src/Project/LeftSidebar/NavPanel/CoversationEntry.tsx
@@ -0,0 +1,28 @@
+import { memo, useCallback, useContext } from 'react';
+import { ConversationShortType } from '../../../types/api';
+import { TabsContext } from '../../../context/tabsContext';
+import { TabTypesEnum } from '../../../types/general';
+
+type Props = ConversationShortType & {};
+
+const ConversationEntry = ({ title, id }: Props) => {
+ const { openNewTab } = useContext(TabsContext.Handlers);
+
+ const handleClick = useCallback(() => {
+ openNewTab({ type: TabTypesEnum.CHAT, conversationId: id, title });
+ }, [openNewTab, id, title]);
+
+ return (
+
+ {title}
+
+ );
+};
+
+export default memo(ConversationEntry);
diff --git a/client/src/Project/LeftSidebar/NavPanel/Repo.tsx b/client/src/Project/LeftSidebar/NavPanel/Repo.tsx
new file mode 100644
index 0000000000..9613523ae6
--- /dev/null
+++ b/client/src/Project/LeftSidebar/NavPanel/Repo.tsx
@@ -0,0 +1,212 @@
+import React, {
+ Dispatch,
+ memo,
+ SetStateAction,
+ useCallback,
+ useEffect,
+ useMemo,
+ useRef,
+ useState,
+ MouseEvent,
+} from 'react';
+import { useTranslation } from 'react-i18next';
+import { DirectoryEntry } from '../../../types/api';
+import { getFolderContent } from '../../../services/api';
+import { splitPath } from '../../../utils';
+import GitHubIcon from '../../../icons/GitHubIcon';
+import Dropdown from '../../../components/Dropdown';
+import {
+ ArrowTriangleBottomIcon,
+ HardDriveIcon,
+ MoreHorizontalIcon,
+} from '../../../icons';
+import Button from '../../../components/Button';
+import { SyncStatus } from '../../../types/general';
+import SpinLoaderContainer from '../../../components/Loaders/SpinnerLoader';
+import Tooltip from '../../../components/Tooltip';
+import { repoStatusMap } from '../../../consts/general';
+import RepoEntry from './RepoEntry';
+import RepoDropdown from './RepoDropdown';
+
+type Props = {
+ repoRef: string;
+ setExpanded: Dispatch
+
+ {isIndexing && indexingData ? (
+
+
+ ) : repoRef.startsWith('github.com') ? (
+
+ );
+};
+
+export default memo(RepoNav);
diff --git a/client/src/Project/LeftSidebar/NavPanel/RepoDropdown.tsx b/client/src/Project/LeftSidebar/NavPanel/RepoDropdown.tsx
new file mode 100644
index 0000000000..0d53808877
--- /dev/null
+++ b/client/src/Project/LeftSidebar/NavPanel/RepoDropdown.tsx
@@ -0,0 +1,314 @@
+import {
+ memo,
+ useCallback,
+ useContext,
+ useRef,
+ useState,
+ MouseEvent,
+ ChangeEvent,
+ useMemo,
+ useEffect,
+} from 'react';
+import { useTranslation } from 'react-i18next';
+import DropdownSection from '../../../components/Dropdown/Section';
+import SectionItem from '../../../components/Dropdown/Section/SectionItem';
+import {
+ ArrowTriangleBottomIcon,
+ BranchIcon,
+ RefreshIcon,
+ TrashCanIcon,
+} from '../../../icons';
+import {
+ changeRepoBranch,
+ indexRepoBranch,
+ removeRepoFromProject,
+ syncRepo,
+} from '../../../services/api';
+import { SyncStatus } from '../../../types/general';
+import { DeviceContext } from '../../../context/deviceContext';
+import SpinLoaderContainer from '../../../components/Loaders/SpinnerLoader';
+import SectionLabel from '../../../components/Dropdown/Section/SectionLabel';
+import Button from '../../../components/Button';
+import { ProjectContext } from '../../../context/projectContext';
+import { PersonalQuotaContext } from '../../../context/personalQuotaContext';
+
+type Props = {
+ repoRef: string;
+ projectId: string;
+ selectedBranch?: string | null;
+ allBranches: { name: string; last_commit_unix_secs: number }[];
+ indexedBranches: string[];
+};
+
+const RepoDropdown = ({
+ repoRef,
+ selectedBranch,
+ indexedBranches,
+ allBranches,
+ projectId,
+}: Props) => {
+ const { t } = useTranslation();
+ const eventSourceRef = useRef
+ {splitPath(repoRef).pop()}
+ {isExpanded && (
+ <>
+ /
+
+ {branch?.replace(/^origin\//, '')}{' '}
+
+
+
+
+
+ )}
+
+
+ {files.map((f) => (
+
+
+
+
+
+
+
+ );
+};
+
+export default memo(RepoDropdown);
diff --git a/client/src/Project/LeftSidebar/NavPanel/RepoEntry.tsx b/client/src/Project/LeftSidebar/NavPanel/RepoEntry.tsx
new file mode 100644
index 0000000000..d5f9b44e0f
--- /dev/null
+++ b/client/src/Project/LeftSidebar/NavPanel/RepoEntry.tsx
@@ -0,0 +1,184 @@
+import React, {
+ memo,
+ useCallback,
+ useContext,
+ useEffect,
+ useRef,
+ useState,
+} from 'react';
+import { ChevronRightIcon, EyeCutIcon, FolderIcon } from '../../../icons';
+import FileIcon from '../../../components/FileIcon';
+import { DirectoryEntry } from '../../../types/api';
+import { TabsContext } from '../../../context/tabsContext';
+import { TabTypesEnum } from '../../../types/general';
+
+type Props = {
+ name: string;
+ isDirectory: boolean;
+ level: number;
+ fullPath: string;
+ fetchFiles: (path: string) => Promise
+
+
+
+ {!!indexedBranchesToShow.length && (
+
+ switchToBranch(b, e)}
+ label={b.replace(/^origin\//, '')}
+ icon={
+ )}
+ {!!indexingBranchesToShow.length && (
+
+
+ )}
+ {!!notIndexedBranchesToShow.length && (
+
+
+ )}
+
+
+
+ {isDirectory ? (
+ */}
+ {/* Index */}
+ {/* */}
+ {/*)}*/}
+ {/*{!indexed && indexRequested && isIndexing && (*/}
+ {/*
+ {subItems?.length ? (
+
+ );
+};
+
+export default memo(RepoEntry);
diff --git a/client/src/Project/LeftSidebar/NavPanel/index.tsx b/client/src/Project/LeftSidebar/NavPanel/index.tsx
new file mode 100644
index 0000000000..3163ed21ae
--- /dev/null
+++ b/client/src/Project/LeftSidebar/NavPanel/index.tsx
@@ -0,0 +1,158 @@
+import {
+ memo,
+ useCallback,
+ useContext,
+ useEffect,
+ useMemo,
+ useRef,
+ useState,
+} from 'react';
+import { ProjectContext } from '../../../context/projectContext';
+import { SyncStatus, TabTypesEnum } from '../../../types/general';
+import { TabsContext } from '../../../context/tabsContext';
+import { DeviceContext } from '../../../context/deviceContext';
+import { getIndexedRepos } from '../../../services/api';
+import RepoNav from './Repo';
+import ConversationsNav from './Conversations';
+
+type Props = {};
+
+const NavPanel = ({}: Props) => {
+ const [expanded, setExpanded] = useState(-1);
+ const { project, refreshCurrentProjectRepos } = useContext(
+ ProjectContext.Current,
+ );
+ const { focusedPanel } = useContext(TabsContext.All);
+ const { tab: leftTab } = useContext(TabsContext.CurrentLeft);
+ const { tab: rightTab } = useContext(TabsContext.CurrentRight);
+ const { apiUrl } = useContext(DeviceContext);
+ const [indexingRepos, setIndexingRepos] = useState<
+ Record<
+ string,
+ {
+ status: SyncStatus;
+ percentage?: string;
+ branch?: string;
+ }
+ >
+ >({});
+ const eventSourceRef = useRef
+
+ ) : null}
+ {isDirectory ? (
+ */}
+ {/*
*/}
+ {/*)}*/}
+
+
+ {subItems.map((si) => (
+
+ ) : null}
+
+ {!!project?.conversations.length && (
+
+ );
+};
+
+export default memo(NavPanel);
diff --git a/client/src/components/SearchInput/AutocompleteMenu.tsx b/client/src/Project/LeftSidebar/RegexSearchPanel/AutocompleteMenu.tsx
similarity index 50%
rename from client/src/components/SearchInput/AutocompleteMenu.tsx
rename to client/src/Project/LeftSidebar/RegexSearchPanel/AutocompleteMenu.tsx
index 223867ed37..4fd3ff464a 100644
--- a/client/src/components/SearchInput/AutocompleteMenu.tsx
+++ b/client/src/Project/LeftSidebar/RegexSearchPanel/AutocompleteMenu.tsx
@@ -1,6 +1,6 @@
-import React, { useMemo, useState } from 'react';
+import React, { memo, useMemo } from 'react';
import { Trans } from 'react-i18next';
-import { ResultItemType, SuggestionType } from '../../types/results';
+import { ResultItemType, SuggestionType } from '../../../types/results';
import AutocompleteMenuItem from './AutocompleteMenuItem';
type Props = {
@@ -14,6 +14,7 @@ type Props = {
}) => any;
isOpen: boolean;
options: SuggestionType[];
+ highlightedIndex: number;
};
const AutocompleteMenu = ({
@@ -21,9 +22,8 @@ const AutocompleteMenu = ({
isOpen,
options,
getItemProps,
+ highlightedIndex,
}: Props) => {
- const [allResultsShown, setAllResultsShown] = useState(false);
-
const queryOptions = useMemo(
() =>
options.filter(
@@ -42,17 +42,17 @@ const AutocompleteMenu = ({
return (
-
- {isOpen ? (
+ {isOpen && (
<>
{queryOptions.length ? (
-
+
+ {(lineToRender || tokensMap[0]).tokens.map((token, index) => (
+
+
+
+ );
+};
+
+export default memo(CodeResult);
diff --git a/client/src/Project/LeftSidebar/RegexSearchPanel/Results/FileResult.tsx b/client/src/Project/LeftSidebar/RegexSearchPanel/Results/FileResult.tsx
new file mode 100644
index 0000000000..0d14c1b91e
--- /dev/null
+++ b/client/src/Project/LeftSidebar/RegexSearchPanel/Results/FileResult.tsx
@@ -0,0 +1,83 @@
+import { memo, useCallback, useContext, useEffect, useRef } from 'react';
+import FileIcon from '../../../../components/FileIcon';
+import { TabTypesEnum } from '../../../../types/general';
+import { TabsContext } from '../../../../context/tabsContext';
+import { RepoFileNameItem } from '../../../../types/api';
+import { FolderIcon } from '../../../../icons';
+import useKeyboardNavigation from '../../../../hooks/useKeyboardNavigation';
+
+type Props = {
+ relative_path: RepoFileNameItem;
+ repo_ref: string;
+ is_dir: boolean;
+ isFocused: boolean;
+ isFirst: boolean;
+};
+
+const FileResult = ({
+ relative_path,
+ repo_ref,
+ is_dir,
+ isFocused,
+ isFirst,
+}: Props) => {
+ const { openNewTab } = useContext(TabsContext.Handlers);
+ const ref = useRef
+
+ {relative_path}
+ -
+ {isExpanded
+ ? snippets.map((s, i) => (
+
+ {is_dir ? (
+
+ );
+};
+
+export default memo(FileResult);
diff --git a/client/src/Project/LeftSidebar/RegexSearchPanel/Results/RepoResult.tsx b/client/src/Project/LeftSidebar/RegexSearchPanel/Results/RepoResult.tsx
new file mode 100644
index 0000000000..63799d7f25
--- /dev/null
+++ b/client/src/Project/LeftSidebar/RegexSearchPanel/Results/RepoResult.tsx
@@ -0,0 +1,9 @@
+import { memo } from 'react';
+
+type Props = {};
+
+const RepoResult = ({}: Props) => {
+ return {relative_path.text}
+ repo
;
+};
+
+export default memo(RepoResult);
diff --git a/client/src/Project/LeftSidebar/RegexSearchPanel/index.tsx b/client/src/Project/LeftSidebar/RegexSearchPanel/index.tsx
new file mode 100644
index 0000000000..62c9fc41ec
--- /dev/null
+++ b/client/src/Project/LeftSidebar/RegexSearchPanel/index.tsx
@@ -0,0 +1,278 @@
+import {
+ ChangeEvent,
+ FormEvent,
+ memo,
+ useCallback,
+ useContext,
+ useRef,
+ useState,
+} from 'react';
+import { useTranslation } from 'react-i18next';
+// import throttle from 'lodash.throttle';
+// import { useCombobox } from 'downshift';
+import { CloseSignIcon, HardDriveIcon, RegexSearchIcon } from '../../../icons';
+import Button from '../../../components/Button';
+import useKeyboardNavigation from '../../../hooks/useKeyboardNavigation';
+import { search } from '../../../services/api';
+import {
+ CodeItem,
+ DirectoryItem,
+ FileItem,
+ FileResItem,
+ RepoItem,
+} from '../../../types/api';
+import GitHubIcon from '../../../icons/GitHubIcon';
+import { splitPath } from '../../../utils';
+import { ProjectContext } from '../../../context/projectContext';
+import { CommandBarContext } from '../../../context/commandBarContext';
+import { regexToggleShortcut } from '../../../consts/shortcuts';
+import CodeResult from './Results/CodeResult';
+import RepoResult from './Results/RepoResult';
+import FileResult from './Results/FileResult';
+
+type Props = {
+ projectId?: string;
+ isRegexEnabled?: boolean;
+};
+
+// const getAutocompleteThrottled = throttle(
+// async (
+// query: string,
+// setOptions: (o: SuggestionType[]) => void,
+// ): Promise
+
+ {/*
+ );
+};
+
+export default memo(RegexSearchPanel);
diff --git a/client/src/Project/LeftSidebar/index.tsx b/client/src/Project/LeftSidebar/index.tsx
new file mode 100644
index 0000000000..c1057df6ea
--- /dev/null
+++ b/client/src/Project/LeftSidebar/index.tsx
@@ -0,0 +1,60 @@
+import React, { memo, useContext } from 'react';
+import useResizeableWidth from '../../hooks/useResizeableWidth';
+import { LEFT_SIDEBAR_WIDTH_KEY } from '../../services/storage';
+import ProjectsDropdown from '../../components/Header/ProjectsDropdown';
+import { ChevronDownIcon } from '../../icons';
+import Dropdown from '../../components/Dropdown';
+import { DeviceContext } from '../../context/deviceContext';
+import { ProjectContext } from '../../context/projectContext';
+import NavPanel from './NavPanel';
+import RegexSearchPanel from './RegexSearchPanel';
+
+type Props = {};
+
+const LeftSidebar = ({}: Props) => {
+ const { os } = useContext(DeviceContext);
+ const { project } = useContext(ProjectContext.Current);
+ const { isRegexSearchEnabled } = useContext(ProjectContext.RegexSearch);
+ const { panelRef, dividerRef } = useResizeableWidth(
+ true,
+ LEFT_SIDEBAR_WIDTH_KEY,
+ 20,
+ 40,
+ );
+ return (
+ -
+ {Object.keys(results).map((repoRef, repoIndex, array) => (
+
-
+
+
+ {repoRef.startsWith('github.com/') ? (
+
+ ) : ( + + )} + {splitPath(repoRef) + .slice(repoRef.startsWith('github.com/') ? -2 : -1) + .join('/')} + + -
+ {results[repoRef].map((r, i) => (
+
-
+ {r.kind === 'snippets' ? (
+
+ ) : r.kind === 'repository_result' ? ( + + ) : r.kind === 'file_result' ? ( + + ) : ( + r.kind + )} +
+ ))}
+
+ ))}
+ -
+ {r.kind === 'snippets' ? (
+
+
+ );
+};
+
+export default memo(LeftSidebar);
diff --git a/client/src/Project/RightTab.tsx b/client/src/Project/RightTab.tsx
new file mode 100644
index 0000000000..b6ba7ed0e5
--- /dev/null
+++ b/client/src/Project/RightTab.tsx
@@ -0,0 +1,38 @@
+import React, { memo } from 'react';
+import useResizeableWidth from '../hooks/useResizeableWidth';
+import { RIGHT_SIDEBAR_WIDTH_KEY } from '../services/storage';
+import { TabType } from '../types/general';
+import CurrentTabContent from './CurrentTabContent';
+
+type Props = {
+ onDropToRight: (tab: TabType) => void;
+ moveToAnotherSide: (tab: TabType) => void;
+};
+
+const RightTab = ({ onDropToRight, moveToAnotherSide }: Props) => {
+ const { panelRef, dividerRef } = useResizeableWidth(
+ false,
+ RIGHT_SIDEBAR_WIDTH_KEY,
+ 40,
+ 60,
+ 15,
+ );
+
+ return (
+
+ {os.type === 'Darwin' ? : ''}
+
+
+
+
+
+ + {project?.name || 'Default project'} +
+
+
+
+
+
+ );
+};
+
+export default memo(RightTab);
diff --git a/client/src/Project/index.tsx b/client/src/Project/index.tsx
new file mode 100644
index 0000000000..b09bf900c9
--- /dev/null
+++ b/client/src/Project/index.tsx
@@ -0,0 +1,112 @@
+import React, { memo, useCallback, useContext } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useDragLayer } from 'react-dnd';
+import { ProjectContext } from '../context/projectContext';
+import { TabsContext } from '../context/tabsContext';
+import { TabType, TabTypesEnum } from '../types/general';
+import ChatsContextProvider from '../context/providers/ChatsContextProvider';
+import LeftSidebar from './LeftSidebar';
+import CurrentTabContent from './CurrentTabContent';
+import EmptyProject from './EmptyProject';
+import DropTarget from './CurrentTabContent/DropTarget';
+import RightTab from './RightTab';
+import ChatPersistentState from './CurrentTabContent/ChatTab/ChatPersistentState';
+
+type Props = {};
+
+const Project = ({}: Props) => {
+ useTranslation();
+ const { project } = useContext(ProjectContext.Current);
+ const { rightTabs, leftTabs } = useContext(TabsContext.All);
+ const {
+ setActiveRightTab,
+ setActiveLeftTab,
+ setLeftTabs,
+ setFocusedPanel,
+ setRightTabs,
+ } = useContext(TabsContext.Handlers);
+ const { isDragging } = useDragLayer((monitor) => ({
+ isDragging: monitor.isDragging(),
+ }));
+
+ const onDropToRight = useCallback((tab: TabType) => {
+ setRightTabs((prev) =>
+ prev.find((t) => t.key === tab.key)
+ ? prev
+ : [
+ ...prev,
+ tab.type === TabTypesEnum.FILE && tab.isTemp
+ ? { ...tab, isTemp: false }
+ : tab,
+ ],
+ );
+ setLeftTabs((prev) => {
+ const newTabs = prev.filter((s) => s.key !== tab.key);
+ setActiveLeftTab(newTabs[newTabs.length - 1]);
+ return newTabs;
+ });
+ setActiveRightTab(tab);
+ setFocusedPanel('right');
+ }, []);
+
+ const onDropToLeft = useCallback((tab: TabType) => {
+ setLeftTabs((prev) =>
+ prev.find((t) => t.key === tab.key)
+ ? prev
+ : [
+ ...prev,
+ tab.type === TabTypesEnum.FILE && tab.isTemp
+ ? { ...tab, isTemp: false }
+ : tab,
+ ],
+ );
+ setRightTabs((prev) => {
+ const newTabs = prev.filter((s) => s.key !== tab.key);
+ setActiveRightTab(newTabs[newTabs.length - 1]);
+ return newTabs;
+ });
+ setActiveLeftTab(tab);
+ setFocusedPanel('left');
+ }, []);
+
+ return !project?.repos?.length ? (
+
+
+
+
+
+
+
+ );
+};
+
+export default memo(Project);
diff --git a/client/src/ProjectSettings/AnswerSpeedDropdown.tsx b/client/src/ProjectSettings/AnswerSpeedDropdown.tsx
new file mode 100644
index 0000000000..bf86ed2535
--- /dev/null
+++ b/client/src/ProjectSettings/AnswerSpeedDropdown.tsx
@@ -0,0 +1,39 @@
+import { memo, useContext } from 'react';
+import { useTranslation } from 'react-i18next';
+import DropdownSection from '../components/Dropdown/Section';
+import SectionItem from '../components/Dropdown/Section/SectionItem';
+import { ProjectContext } from '../context/projectContext';
+import { RunIcon, WalkIcon } from '../icons';
+
+type Props = {};
+
+const AnswerSpeedDropdown = ({}: Props) => {
+ const { t } = useTranslation();
+ const { preferredAnswerSpeed, setPreferredAnswerSpeed } = useContext(
+ ProjectContext.AnswerSpeed,
+ );
+ return (
+
+
+ {!!rightTabs.length && (
+
+
+ setPreferredAnswerSpeed('normal')}
+ icon={
+
+ setPreferredAnswerSpeed('fast')}
+ icon={
+
+ );
+};
+
+export default memo(AnswerSpeedDropdown);
diff --git a/client/src/ProjectSettings/General.tsx b/client/src/ProjectSettings/General.tsx
new file mode 100644
index 0000000000..bec750648b
--- /dev/null
+++ b/client/src/ProjectSettings/General.tsx
@@ -0,0 +1,124 @@
+import React, {
+ ChangeEvent,
+ memo,
+ useCallback,
+ useContext,
+ useEffect,
+ useState,
+} from 'react';
+import { Trans, useTranslation } from 'react-i18next';
+import TextInput from '../components/TextInput';
+import { ProjectContext } from '../context/projectContext';
+import Button from '../components/Button';
+import { deleteProject, updateProject } from '../services/api';
+import { UIContext } from '../context/uiContext';
+import Dropdown from '../components/Dropdown';
+import { ChevronDownIcon, RunIcon, WalkIcon } from '../icons';
+import AnswerSpeedDropdown from './AnswerSpeedDropdown';
+
+type Props = {};
+
+const General = ({}: Props) => {
+ const { t } = useTranslation();
+ const { project, refreshCurrentProject, setCurrentProjectId } = useContext(
+ ProjectContext.Current,
+ );
+ const { refreshAllProjects, projects } = useContext(ProjectContext.All);
+ const { preferredAnswerSpeed } = useContext(ProjectContext.AnswerSpeed);
+ const { setProjectSettingsOpen } = useContext(UIContext.ProjectSettings);
+ const [name, setName] = useState(project?.name || '');
+
+ useEffect(() => {
+ setName(project?.name || '');
+ }, [project?.name]);
+
+ const handleChange = useCallback((e: ChangeEvent
+
+
+
+
+ );
+};
+
+export default memo(General);
diff --git a/client/src/ProjectSettings/index.tsx b/client/src/ProjectSettings/index.tsx
new file mode 100644
index 0000000000..ac0404547c
--- /dev/null
+++ b/client/src/ProjectSettings/index.tsx
@@ -0,0 +1,60 @@
+import React, { memo, useCallback, useContext } from 'react';
+import { useTranslation } from 'react-i18next';
+import { UIContext } from '../context/uiContext';
+import Header from '../components/Header';
+import useKeyboardNavigation from '../hooks/useKeyboardNavigation';
+import { ProjectSettingSections } from '../types/general';
+import SectionsNav from '../components/SectionsNav';
+import { ShapesIcon } from '../icons';
+import General from './General';
+
+type Props = {};
+
+const ProjectSettings = ({}: Props) => {
+ const { t } = useTranslation();
+ const {
+ isProjectSettingsOpen,
+ setProjectSettingsOpen,
+ projectSettingsSection,
+ setProjectSettingsSection,
+ } = useContext(UIContext.ProjectSettings);
+
+ const handleKeyEvent = useCallback((e: KeyboardEvent) => {
+ if (e.key === 'Escape') {
+ e.preventDefault();
+ e.stopPropagation();
+ setProjectSettingsOpen(false);
+ }
+ }, []);
+ useKeyboardNavigation(handleKeyEvent, !isProjectSettingsOpen);
+
+ return isProjectSettingsOpen ? (
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+ + Permanently delete{' '} + {project?.name} and + remove all the data associated to it. Repositories will remain + accessible in your GitHub account. +
+ +
+
+ ) : null;
+};
+
+export default memo(ProjectSettings);
diff --git a/client/src/Settings/General.tsx b/client/src/Settings/General.tsx
new file mode 100644
index 0000000000..751cbae189
--- /dev/null
+++ b/client/src/Settings/General.tsx
@@ -0,0 +1,98 @@
+import React, {
+ ChangeEvent,
+ memo,
+ useCallback,
+ useMemo,
+ useState,
+} from 'react';
+import { Trans, useTranslation } from 'react-i18next';
+import TextInput from '../components/TextInput';
+import {
+ getJsonFromStorage,
+ saveJsonToStorage,
+ USER_DATA_FORM,
+} from '../services/storage';
+import { EMAIL_REGEX } from '../consts/validations';
+
+type Props = {};
+
+type Form = {
+ firstName: string;
+ lastName: string;
+ email: string;
+ emailError?: string;
+};
+
+const GeneralSettings = ({}: Props) => {
+ const { t } = useTranslation();
+ const savedForm: Form | null = useMemo(
+ () => getJsonFromStorage(USER_DATA_FORM),
+ [],
+ );
+ const [form, setForm] = useState
+
+ activeItem={projectSettingsSection}
+ sections={[
+ {
+ title: t('Project'),
+ Icon: ShapesIcon,
+ items: [
+ {
+ type: ProjectSettingSections.GENERAL,
+ onClick: setProjectSettingsSection,
+ label: t('General'),
+ },
+ ],
+ },
+ ]}
+ />
+ {projectSettingsSection === ProjectSettingSections.GENERAL ? (
+
+