From b0c3bca9156ce4c42207a798f2d086b4c7de2211 Mon Sep 17 00:00:00 2001 From: Jim Su Date: Mon, 22 Apr 2024 12:29:03 -0400 Subject: [PATCH] refactor(frontend): Refactor imports to use absolute path (#1288) * Refactor imports to use absolute path * Rename absolute import symbol from src to # * Refactor imports to use absolute path * Rename absolute import symbol from src to # * Remove unused LoadMessageModal --- frontend/.eslintrc | 12 +++++++++- frontend/package-lock.json | 9 ++++--- frontend/package.json | 2 +- frontend/src/App.tsx | 24 +++++++++---------- frontend/src/components/AgentControlBar.tsx | 18 +++++++------- frontend/src/components/AgentStatusBar.tsx | 6 ++--- frontend/src/components/Browser.tsx | 2 +- frontend/src/components/ChatInput.tsx | 2 +- frontend/src/components/ChatInterface.tsx | 8 +++---- frontend/src/components/CodeEditor.tsx | 6 ++--- frontend/src/components/Errors.tsx | 2 +- frontend/src/components/Planner.tsx | 4 ++-- frontend/src/components/Terminal.tsx | 8 +++---- frontend/src/components/Workspace.tsx | 12 +++++----- .../file-explorer/ExplorerTree.test.tsx | 2 +- .../components/file-explorer/ExplorerTree.tsx | 2 +- .../file-explorer/FileExplorer.test.tsx | 2 +- .../components/file-explorer/FileExplorer.tsx | 2 +- .../file-explorer/TreeNode.test.tsx | 2 +- .../src/components/file-explorer/TreeNode.tsx | 2 +- .../src/components/file-explorer/utils.ts | 2 +- .../modals/settings/AutocompleteCombobox.tsx | 2 +- .../modals/settings/SettingsForm.tsx | 2 +- .../modals/settings/SettingsModal.test.tsx | 6 ++--- .../modals/settings/SettingsModal.tsx | 6 ++--- frontend/src/hooks/useTypingEffect.ts | 2 +- frontend/src/i18n/index.ts | 2 +- frontend/src/index.tsx | 4 ++-- frontend/src/services/actions.ts | 22 ++++++++--------- frontend/src/services/agentStateService.ts | 4 ++-- frontend/src/services/auth.ts | 2 +- frontend/src/services/chatService.ts | 10 ++++---- frontend/src/services/observations.ts | 12 +++++----- frontend/src/services/settingsService.test.ts | 2 +- frontend/src/services/settingsService.ts | 12 +++++----- frontend/src/services/socket.ts | 2 +- frontend/src/state/agentSlice.tsx | 2 +- frontend/src/state/codeSlice.ts | 2 +- frontend/src/state/planSlice.ts | 2 +- frontend/src/state/settingsSlice.ts | 2 +- frontend/tsconfig.json | 6 ++++- frontend/vite.config.ts | 1 + 42 files changed, 125 insertions(+), 109 deletions(-) diff --git a/frontend/.eslintrc b/frontend/.eslintrc index 7007a724a3..3b2799979e 100644 --- a/frontend/.eslintrc +++ b/frontend/.eslintrc @@ -14,7 +14,17 @@ ], "plugins": ["prettier"], "rules": { - "prettier/prettier": ["error"] + "prettier/prettier": ["error"], + // Resolves https://stackoverflow.com/questions/59265981/typescript-eslint-missing-file-extension-ts-import-extensions/59268871#59268871 + "import/extensions": [ + "error", + "ignorePackages", + { + "": "never", + "ts": "never", + "tsx": "never" + } + ] }, "settings": { "react": { diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 605bf3d161..74521dcf36 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -32,7 +32,6 @@ "react-syntax-highlighter": "^15.5.0", "tailwind-merge": "^2.2.2", "vite": "^5.1.6", - "vite-tsconfig-paths": "^4.3.2", "web-vitals": "^2.1.4", "xterm-addon-fit": "^0.8.0" }, @@ -63,6 +62,7 @@ "prettier": "^3.2.5", "tailwindcss": "^3.4.2", "typescript": "^5.4.3", + "vite-tsconfig-paths": "^4.3.2", "vitest": "^1.5.0" }, "engines": { @@ -8139,7 +8139,8 @@ "node_modules/globrex": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/globrex/-/globrex-0.1.2.tgz", - "integrity": "sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg==" + "integrity": "sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg==", + "dev": true }, "node_modules/goober": { "version": "2.1.14", @@ -13247,6 +13248,7 @@ "version": "3.0.3", "resolved": "https://registry.npmjs.org/tsconfck/-/tsconfck-3.0.3.tgz", "integrity": "sha512-4t0noZX9t6GcPTfBAbIbbIU4pfpCwh0ueq3S4O/5qXI1VwK1outmxhe9dOiEWqMz3MW2LKgDTpqWV+37IWuVbA==", + "dev": true, "bin": { "tsconfck": "bin/tsconfck.js" }, @@ -13412,7 +13414,7 @@ "version": "5.4.4", "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.4.4.tgz", "integrity": "sha512-dGE2Vv8cpVvw28v8HCPqyb08EzbBURxDpuhJvTrusShUfGnhHBafDsLdS1EhhxyL6BJQE+2cT3dDPAv+MQ6oLw==", - "devOptional": true, + "dev": true, "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" @@ -13692,6 +13694,7 @@ "version": "4.3.2", "resolved": "https://registry.npmjs.org/vite-tsconfig-paths/-/vite-tsconfig-paths-4.3.2.tgz", "integrity": "sha512-0Vd/a6po6Q+86rPlntHye7F31zA2URZMbH8M3saAZ/xR9QoGN/L21bxEGfXdWmFdNkqPpRdxFT7nmNe12e9/uA==", + "dev": true, "dependencies": { "debug": "^4.1.1", "globrex": "^0.1.2", diff --git a/frontend/package.json b/frontend/package.json index 09ee192176..a73f793857 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -31,7 +31,6 @@ "react-syntax-highlighter": "^15.5.0", "tailwind-merge": "^2.2.2", "vite": "^5.1.6", - "vite-tsconfig-paths": "^4.3.2", "web-vitals": "^2.1.4", "xterm-addon-fit": "^0.8.0" }, @@ -83,6 +82,7 @@ "prettier": "^3.2.5", "tailwindcss": "^3.4.2", "typescript": "^5.4.3", + "vite-tsconfig-paths": "^4.3.2", "vitest": "^1.5.0" }, "packageManager": "npm@10.5.0", diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index dd0a631f3b..bef8e9d87c 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -2,18 +2,18 @@ import React, { useEffect, useState } from "react"; import "./App.css"; import { Toaster } from "react-hot-toast"; import { useDisclosure } from "@nextui-org/react"; -import CogTooth from "./assets/cog-tooth"; -import ChatInterface from "./components/ChatInterface"; -import Errors from "./components/Errors"; -import { Container, Orientation } from "./components/Resizable"; -import Terminal from "./components/Terminal"; -import Workspace from "./components/Workspace"; -import { fetchMsgTotal } from "./services/session"; -import { initializeAgent } from "./services/settingsService"; -import Socket from "./services/socket"; -import { ResFetchMsgTotal } from "./types/ResponseType"; -import SettingsModal from "./components/modals/settings/SettingsModal"; -import LoadPreviousSessionModal from "./components/modals/load-previous-session/LoadPreviousSessionModal"; +import CogTooth from "#/assets/cog-tooth"; +import ChatInterface from "#/components/ChatInterface"; +import Errors from "#/components/Errors"; +import { Container, Orientation } from "#/components/Resizable"; +import Terminal from "#/components/Terminal"; +import Workspace from "#/components/Workspace"; +import { fetchMsgTotal } from "#/services/session"; +import { initializeAgent } from "#/services/settingsService"; +import Socket from "#/services/socket"; +import { ResFetchMsgTotal } from "#/types/ResponseType"; +import SettingsModal from "#/components/modals/settings/SettingsModal"; +import LoadPreviousSessionModal from "#/components/modals/load-previous-session/LoadPreviousSessionModal"; interface Props { setSettingOpen: (isOpen: boolean) => void; diff --git a/frontend/src/components/AgentControlBar.tsx b/frontend/src/components/AgentControlBar.tsx index a21d8507c0..6f2bde77b4 100644 --- a/frontend/src/components/AgentControlBar.tsx +++ b/frontend/src/components/AgentControlBar.tsx @@ -1,15 +1,15 @@ import { Button, ButtonGroup, Tooltip } from "@nextui-org/react"; import React, { useEffect } from "react"; import { useSelector } from "react-redux"; -import ArrowIcon from "../assets/arrow"; -import PauseIcon from "../assets/pause"; -import PlayIcon from "../assets/play"; -import { changeTaskState } from "../services/agentStateService"; -import { clearMsgs } from "../services/session"; -import { clearMessages } from "../state/chatSlice"; -import store, { RootState } from "../store"; -import AgentTaskAction from "../types/AgentTaskAction"; -import AgentTaskState from "../types/AgentTaskState"; +import ArrowIcon from "#/assets/arrow"; +import PauseIcon from "#/assets/pause"; +import PlayIcon from "#/assets/play"; +import { changeTaskState } from "#/services/agentStateService"; +import { clearMsgs } from "#/services/session"; +import { clearMessages } from "#/state/chatSlice"; +import store, { RootState } from "#/store"; +import AgentTaskAction from "#/types/AgentTaskAction"; +import AgentTaskState from "#/types/AgentTaskState"; const TaskStateActionMap = { [AgentTaskAction.START]: AgentTaskState.RUNNING, diff --git a/frontend/src/components/AgentStatusBar.tsx b/frontend/src/components/AgentStatusBar.tsx index 3a9c671b58..f1ac56aa7b 100644 --- a/frontend/src/components/AgentStatusBar.tsx +++ b/frontend/src/components/AgentStatusBar.tsx @@ -1,9 +1,9 @@ import React from "react"; import { useTranslation } from "react-i18next"; import { useSelector } from "react-redux"; -import { I18nKey } from "../i18n/declaration"; -import { RootState } from "../store"; -import AgentTaskState from "../types/AgentTaskState"; +import { I18nKey } from "#/i18n/declaration"; +import { RootState } from "#/store"; +import AgentTaskState from "#/types/AgentTaskState"; const AgentStatusMap: { [k: string]: { message: string; indicator: string } } = { diff --git a/frontend/src/components/Browser.tsx b/frontend/src/components/Browser.tsx index 081b2b0258..f8eed0e190 100644 --- a/frontend/src/components/Browser.tsx +++ b/frontend/src/components/Browser.tsx @@ -1,6 +1,6 @@ import React from "react"; import { useSelector } from "react-redux"; -import { RootState } from "../store"; +import { RootState } from "#/store"; function Browser(): JSX.Element { const { url, screenshotSrc } = useSelector( diff --git a/frontend/src/components/ChatInput.tsx b/frontend/src/components/ChatInput.tsx index 56e5923a1c..82a554668e 100644 --- a/frontend/src/components/ChatInput.tsx +++ b/frontend/src/components/ChatInput.tsx @@ -3,7 +3,7 @@ import React from "react"; import { useTranslation } from "react-i18next"; import { twMerge } from "tailwind-merge"; import { VscSend } from "react-icons/vsc"; -import { I18nKey } from "../i18n/declaration"; +import { I18nKey } from "#/i18n/declaration"; interface ChatInputProps { disabled?: boolean; diff --git a/frontend/src/components/ChatInterface.tsx b/frontend/src/components/ChatInterface.tsx index 9322684466..14fb8cd33e 100644 --- a/frontend/src/components/ChatInterface.tsx +++ b/frontend/src/components/ChatInterface.tsx @@ -2,15 +2,15 @@ import { Card, CardBody } from "@nextui-org/react"; import React, { useEffect, useRef } from "react"; import { IoMdChatbubbles } from "react-icons/io"; import { useSelector } from "react-redux"; -import { useTypingEffect } from "../hooks/useTypingEffect"; +import { useTypingEffect } from "#/hooks/useTypingEffect"; import { addAssistantMessageToChat, sendChatMessage, setTypingActive, takeOneAndType, -} from "../services/chatService"; -import { Message } from "../state/chatSlice"; -import { RootState } from "../store"; +} from "#/services/chatService"; +import { Message } from "#/state/chatSlice"; +import { RootState } from "#/store"; import AgentControlBar from "./AgentControlBar"; import AgentStatusBar from "./AgentStatusBar"; import ChatInput from "./ChatInput"; diff --git a/frontend/src/components/CodeEditor.tsx b/frontend/src/components/CodeEditor.tsx index d19fd87c2e..446fb5d23f 100644 --- a/frontend/src/components/CodeEditor.tsx +++ b/frontend/src/components/CodeEditor.tsx @@ -3,9 +3,9 @@ import { Tab, Tabs } from "@nextui-org/react"; import type { editor } from "monaco-editor"; import React, { useState } from "react"; import { useDispatch, useSelector } from "react-redux"; -import { RootState } from "../store"; -import { selectFile } from "../services/fileService"; -import { setCode } from "../state/codeSlice"; +import { RootState } from "#/store"; +import { selectFile } from "#/services/fileService"; +import { setCode } from "#/state/codeSlice"; import FileExplorer from "./file-explorer/FileExplorer"; function CodeEditor(): JSX.Element { diff --git a/frontend/src/components/Errors.tsx b/frontend/src/components/Errors.tsx index 48d7c15d89..ff3a2d22cf 100644 --- a/frontend/src/components/Errors.tsx +++ b/frontend/src/components/Errors.tsx @@ -1,6 +1,6 @@ import React from "react"; import { useSelector } from "react-redux"; -import { RootState } from "../store"; +import { RootState } from "#/store"; function Errors(): JSX.Element { const errors = useSelector((state: RootState) => state.errors.errors); diff --git a/frontend/src/components/Planner.tsx b/frontend/src/components/Planner.tsx index 588b68d0cf..bb6afb76d4 100644 --- a/frontend/src/components/Planner.tsx +++ b/frontend/src/components/Planner.tsx @@ -8,8 +8,8 @@ import { FaRegTimesCircle, } from "react-icons/fa"; import { useSelector } from "react-redux"; -import { Plan, Task, TaskState } from "../services/planService"; -import { RootState } from "../store"; +import { Plan, Task, TaskState } from "#/services/planService"; +import { RootState } from "#/store"; function StatusIcon({ status }: { status: TaskState }): JSX.Element { switch (status) { diff --git a/frontend/src/components/Terminal.tsx b/frontend/src/components/Terminal.tsx index a79e93b693..bd732470d1 100644 --- a/frontend/src/components/Terminal.tsx +++ b/frontend/src/components/Terminal.tsx @@ -4,10 +4,10 @@ import React, { useEffect, useRef } from "react"; import { VscTerminal } from "react-icons/vsc"; import { useSelector } from "react-redux"; import { FitAddon } from "xterm-addon-fit"; -import Socket from "../services/socket"; -import { RootState } from "../store"; -import ActionType from "../types/ActionType"; -import ObservationType from "../types/ObservationType"; +import Socket from "#/services/socket"; +import { RootState } from "#/store"; +import ActionType from "#/types/ActionType"; +import ObservationType from "#/types/ObservationType"; class JsonWebsocketAddon { _disposables: IDisposable[]; diff --git a/frontend/src/components/Workspace.tsx b/frontend/src/components/Workspace.tsx index d580bc130d..13a76620dd 100644 --- a/frontend/src/components/Workspace.tsx +++ b/frontend/src/components/Workspace.tsx @@ -4,12 +4,12 @@ import { useTranslation } from "react-i18next"; import { IoIosGlobe } from "react-icons/io"; import { VscCode } from "react-icons/vsc"; import { useSelector } from "react-redux"; -import Calendar from "../assets/calendar"; -import { I18nKey } from "../i18n/declaration"; -import { initialState as initialBrowserState } from "../state/browserSlice"; -import { initialState as initialCodeState } from "../state/codeSlice"; -import { RootState } from "../store"; -import { AllTabs, TabOption, TabType } from "../types/TabOption"; +import Calendar from "#/assets/calendar"; +import { I18nKey } from "#/i18n/declaration"; +import { initialState as initialBrowserState } from "#/state/browserSlice"; +import { initialState as initialCodeState } from "#/state/codeSlice"; +import { RootState } from "#/store"; +import { AllTabs, TabOption, TabType } from "#/types/TabOption"; import Browser from "./Browser"; import CodeEditor from "./CodeEditor"; import Planner from "./Planner"; diff --git a/frontend/src/components/file-explorer/ExplorerTree.test.tsx b/frontend/src/components/file-explorer/ExplorerTree.test.tsx index 5969a7d13a..90323d1997 100644 --- a/frontend/src/components/file-explorer/ExplorerTree.test.tsx +++ b/frontend/src/components/file-explorer/ExplorerTree.test.tsx @@ -1,7 +1,7 @@ import React from "react"; import { render } from "@testing-library/react"; import ExplorerTree from "./ExplorerTree"; -import { WorkspaceFile } from "../../services/fileService"; +import { WorkspaceFile } from "#/services/fileService"; const NODE: WorkspaceFile = { name: "root-folder-1", diff --git a/frontend/src/components/file-explorer/ExplorerTree.tsx b/frontend/src/components/file-explorer/ExplorerTree.tsx index 5b776c7a8f..59778fa7e3 100644 --- a/frontend/src/components/file-explorer/ExplorerTree.tsx +++ b/frontend/src/components/file-explorer/ExplorerTree.tsx @@ -1,6 +1,6 @@ import React from "react"; import TreeNode from "./TreeNode"; -import { WorkspaceFile } from "../../services/fileService"; +import { WorkspaceFile } from "#/services/fileService"; interface ExplorerTreeProps { root: WorkspaceFile; diff --git a/frontend/src/components/file-explorer/FileExplorer.test.tsx b/frontend/src/components/file-explorer/FileExplorer.test.tsx index b41134703d..2431334b69 100644 --- a/frontend/src/components/file-explorer/FileExplorer.test.tsx +++ b/frontend/src/components/file-explorer/FileExplorer.test.tsx @@ -3,7 +3,7 @@ import { render, waitFor } from "@testing-library/react"; import userEvent from "@testing-library/user-event"; import { act } from "react-dom/test-utils"; import FileExplorer from "./FileExplorer"; -import { getWorkspace } from "../../services/fileService"; +import { getWorkspace } from "#/services/fileService"; vi.mock("../../services/fileService", async () => ({ getWorkspace: vi.fn(async () => ({ diff --git a/frontend/src/components/file-explorer/FileExplorer.tsx b/frontend/src/components/file-explorer/FileExplorer.tsx index 24b1244f2f..f328c34861 100644 --- a/frontend/src/components/file-explorer/FileExplorer.tsx +++ b/frontend/src/components/file-explorer/FileExplorer.tsx @@ -5,7 +5,7 @@ import { IoIosRefresh, } from "react-icons/io"; import { twMerge } from "tailwind-merge"; -import { WorkspaceFile, getWorkspace } from "../../services/fileService"; +import { WorkspaceFile, getWorkspace } from "#/services/fileService"; import ExplorerTree from "./ExplorerTree"; import { removeEmptyNodes } from "./utils"; import IconButton from "../IconButton"; diff --git a/frontend/src/components/file-explorer/TreeNode.test.tsx b/frontend/src/components/file-explorer/TreeNode.test.tsx index b42c138ba7..83a1d48070 100644 --- a/frontend/src/components/file-explorer/TreeNode.test.tsx +++ b/frontend/src/components/file-explorer/TreeNode.test.tsx @@ -2,7 +2,7 @@ import React from "react"; import { act, render } from "@testing-library/react"; import userEvent from "@testing-library/user-event"; import TreeNode from "./TreeNode"; -import { WorkspaceFile } from "../../services/fileService"; +import { WorkspaceFile } from "#/services/fileService"; const onFileClick = vi.fn(); diff --git a/frontend/src/components/file-explorer/TreeNode.tsx b/frontend/src/components/file-explorer/TreeNode.tsx index 7917b011a9..ad374df6d9 100644 --- a/frontend/src/components/file-explorer/TreeNode.tsx +++ b/frontend/src/components/file-explorer/TreeNode.tsx @@ -1,7 +1,7 @@ import React from "react"; import FolderIcon from "../FolderIcon"; import FileIcon from "../FileIcons"; -import { WorkspaceFile } from "../../services/fileService"; +import { WorkspaceFile } from "#/services/fileService"; interface TitleProps { name: string; diff --git a/frontend/src/components/file-explorer/utils.ts b/frontend/src/components/file-explorer/utils.ts index d8d4fc336e..08060ff3f7 100644 --- a/frontend/src/components/file-explorer/utils.ts +++ b/frontend/src/components/file-explorer/utils.ts @@ -1,4 +1,4 @@ -import { WorkspaceFile } from "../../services/fileService"; +import { WorkspaceFile } from "#/services/fileService"; export const removeEmptyNodes = (root: WorkspaceFile): WorkspaceFile => { if (root.children) { diff --git a/frontend/src/components/modals/settings/AutocompleteCombobox.tsx b/frontend/src/components/modals/settings/AutocompleteCombobox.tsx index 2ca6b26708..353ea1d407 100644 --- a/frontend/src/components/modals/settings/AutocompleteCombobox.tsx +++ b/frontend/src/components/modals/settings/AutocompleteCombobox.tsx @@ -1,7 +1,7 @@ import { Autocomplete, AutocompleteItem } from "@nextui-org/react"; import React from "react"; import { useTranslation } from "react-i18next"; -import { I18nKey } from "../../../i18n/declaration"; +import { I18nKey } from "#/i18n/declaration"; type Label = "model" | "agent" | "language"; diff --git a/frontend/src/components/modals/settings/SettingsForm.tsx b/frontend/src/components/modals/settings/SettingsForm.tsx index 405be15e90..71cbde9150 100644 --- a/frontend/src/components/modals/settings/SettingsForm.tsx +++ b/frontend/src/components/modals/settings/SettingsForm.tsx @@ -1,5 +1,5 @@ import React from "react"; -import { AvailableLanguages } from "../../../i18n"; +import { AvailableLanguages } from "#/i18n"; import { AutocompleteCombobox } from "./AutocompleteCombobox"; interface SettingsFormProps { diff --git a/frontend/src/components/modals/settings/SettingsModal.test.tsx b/frontend/src/components/modals/settings/SettingsModal.test.tsx index 7833d36c60..b9f6a62d14 100644 --- a/frontend/src/components/modals/settings/SettingsModal.test.tsx +++ b/frontend/src/components/modals/settings/SettingsModal.test.tsx @@ -10,10 +10,8 @@ import { } from "../../../services/settingsService"; import SettingsModal from "./SettingsModal"; -vi.mock("../../../services/settingsService", async (importOriginal) => ({ - ...(await importOriginal< - typeof import("../../../services/settingsService") - >()), +vi.mock("../../services/settingsService", async (importOriginal) => ({ + ...(await importOriginal()), getCurrentSettings: vi.fn().mockReturnValue({}), saveSettings: vi.fn(), fetchModels: vi diff --git a/frontend/src/components/modals/settings/SettingsModal.tsx b/frontend/src/components/modals/settings/SettingsModal.tsx index 8e74d65295..2d5bc06442 100644 --- a/frontend/src/components/modals/settings/SettingsModal.tsx +++ b/frontend/src/components/modals/settings/SettingsModal.tsx @@ -8,9 +8,9 @@ import { fetchModels, getCurrentSettings, saveSettings, -} from "../../../services/settingsService"; -import { I18nKey } from "../../../i18n/declaration"; -import { AvailableLanguages } from "../../../i18n"; +} from "#/services/settingsService"; +import { I18nKey } from "#/i18n/declaration"; +import { AvailableLanguages } from "#/i18n"; interface SettingsProps { isOpen: boolean; diff --git a/frontend/src/hooks/useTypingEffect.ts b/frontend/src/hooks/useTypingEffect.ts index 996b3bdba0..af80eb098a 100644 --- a/frontend/src/hooks/useTypingEffect.ts +++ b/frontend/src/hooks/useTypingEffect.ts @@ -1,5 +1,5 @@ import { useEffect, useState } from "react"; -import { Message } from "../state/chatSlice"; +import { Message } from "#/state/chatSlice"; /** * hook to be used for typing chat effect */ diff --git a/frontend/src/i18n/index.ts b/frontend/src/i18n/index.ts index 08a8bf792e..d1e39c0b51 100644 --- a/frontend/src/i18n/index.ts +++ b/frontend/src/i18n/index.ts @@ -2,7 +2,7 @@ import i18n from "i18next"; import Backend from "i18next-http-backend"; import LanguageDetector from "i18next-browser-languagedetector"; import { initReactI18next } from "react-i18next"; -import { ArgConfigType } from "../types/ConfigType"; +import { ArgConfigType } from "#/types/ConfigType"; export const AvailableLanguages = [ { label: "English", value: "en" }, diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx index b7f7f24173..2a24858483 100644 --- a/frontend/src/index.tsx +++ b/frontend/src/index.tsx @@ -6,8 +6,8 @@ import { Provider } from "react-redux"; import { NextUIProvider } from "@nextui-org/react"; import App from "./App"; import reportWebVitals from "./reportWebVitals"; -import store from "./store"; -import "./i18n"; +import store from "#/store"; +import "#/i18n"; const root = ReactDOM.createRoot( document.getElementById("root") as HTMLElement, diff --git a/frontend/src/services/actions.ts b/frontend/src/services/actions.ts index 01932d7331..f4551a8960 100644 --- a/frontend/src/services/actions.ts +++ b/frontend/src/services/actions.ts @@ -1,14 +1,14 @@ -import { changeTaskState } from "../state/agentSlice"; -import { setScreenshotSrc, setUrl } from "../state/browserSlice"; -import { appendAssistantMessage } from "../state/chatSlice"; -import { setCode, updatePath } from "../state/codeSlice"; -import { appendInput } from "../state/commandSlice"; -import { setPlan } from "../state/planSlice"; -import { setInitialized } from "../state/taskSlice"; -import store from "../store"; -import ActionType from "../types/ActionType"; -import { ActionMessage } from "../types/Message"; -import { SocketMessage } from "../types/ResponseType"; +import { changeTaskState } from "#/state/agentSlice"; +import { setScreenshotSrc, setUrl } from "#/state/browserSlice"; +import { appendAssistantMessage } from "#/state/chatSlice"; +import { setCode, updatePath } from "#/state/codeSlice"; +import { appendInput } from "#/state/commandSlice"; +import { setPlan } from "#/state/planSlice"; +import { setInitialized } from "#/state/taskSlice"; +import store from "#/store"; +import ActionType from "#/types/ActionType"; +import { ActionMessage } from "#/types/Message"; +import { SocketMessage } from "#/types/ResponseType"; import { handleObservationMessage } from "./observations"; import { getPlan } from "./planService"; diff --git a/frontend/src/services/agentStateService.ts b/frontend/src/services/agentStateService.ts index e55e45cdff..42e3d90d4a 100644 --- a/frontend/src/services/agentStateService.ts +++ b/frontend/src/services/agentStateService.ts @@ -1,6 +1,6 @@ -import ActionType from "../types/ActionType"; +import ActionType from "#/types/ActionType"; +import AgentTaskAction from "#/types/AgentTaskAction"; import Socket from "./socket"; -import AgentTaskAction from "../types/AgentTaskAction"; export function changeTaskState(message: AgentTaskAction): void { const eventString = JSON.stringify({ diff --git a/frontend/src/services/auth.ts b/frontend/src/services/auth.ts index 4f9ba870a1..29fd75db65 100644 --- a/frontend/src/services/auth.ts +++ b/frontend/src/services/auth.ts @@ -1,5 +1,5 @@ import * as jose from "jose"; -import { ResFetchToken } from "../types/ResponseType"; +import { ResFetchToken } from "#/types/ResponseType"; const fetchToken = async (): Promise => { const headers = new Headers({ diff --git a/frontend/src/services/chatService.ts b/frontend/src/services/chatService.ts index a735e6b88e..18d4042f2a 100644 --- a/frontend/src/services/chatService.ts +++ b/frontend/src/services/chatService.ts @@ -4,12 +4,12 @@ import { appendUserMessage, takeOneTypeIt, toggleTypingActive, -} from "../state/chatSlice"; +} from "#/state/chatSlice"; +import store from "#/store"; +import ActionType from "#/types/ActionType"; +import { SocketMessage } from "#/types/ResponseType"; +import { ActionMessage } from "#/types/Message"; import Socket from "./socket"; -import store from "../store"; -import ActionType from "../types/ActionType"; -import { SocketMessage } from "../types/ResponseType"; -import { ActionMessage } from "../types/Message"; export function sendChatMessage(message: string): void { store.dispatch(appendUserMessage(message)); diff --git a/frontend/src/services/observations.ts b/frontend/src/services/observations.ts index 543bde7cb3..39cafafd93 100644 --- a/frontend/src/services/observations.ts +++ b/frontend/src/services/observations.ts @@ -1,9 +1,9 @@ -import { appendAssistantMessage } from "../state/chatSlice"; -import { setUrl, setScreenshotSrc } from "../state/browserSlice"; -import store from "../store"; -import { ObservationMessage } from "../types/Message"; -import { appendOutput } from "../state/commandSlice"; -import ObservationType from "../types/ObservationType"; +import { appendAssistantMessage } from "#/state/chatSlice"; +import { setUrl, setScreenshotSrc } from "#/state/browserSlice"; +import store from "#/store"; +import { ObservationMessage } from "#/types/Message"; +import { appendOutput } from "#/state/commandSlice"; +import ObservationType from "#/types/ObservationType"; export function handleObservationMessage(message: ObservationMessage) { switch (message.observation) { diff --git a/frontend/src/services/settingsService.test.ts b/frontend/src/services/settingsService.test.ts index 71e8f772aa..ce9861273f 100644 --- a/frontend/src/services/settingsService.test.ts +++ b/frontend/src/services/settingsService.test.ts @@ -1,5 +1,5 @@ +import { ArgConfigType } from "#/types/ConfigType"; import { getSettingOrDefault, getUpdatedSettings } from "./settingsService"; -import { ArgConfigType } from "../types/ConfigType"; Storage.prototype.getItem = vi.fn(); diff --git a/frontend/src/services/settingsService.ts b/frontend/src/services/settingsService.ts index ffe395486d..0ebf3466d2 100644 --- a/frontend/src/services/settingsService.ts +++ b/frontend/src/services/settingsService.ts @@ -1,10 +1,10 @@ -import { setInitialized } from "../state/taskSlice"; -import store from "../store"; -import ActionType from "../types/ActionType"; -import { SupportedSettings } from "../types/ConfigType"; +import { setInitialized } from "#/state/taskSlice"; +import store from "#/store"; +import ActionType from "#/types/ActionType"; +import { SupportedSettings } from "#/types/ConfigType"; +import { setByKey } from "#/state/settingsSlice"; +import toast from "#/utils/toast"; import Socket from "./socket"; -import { setByKey } from "../state/settingsSlice"; -import toast from "../utils/toast"; export type Settings = { [key: string]: string }; diff --git a/frontend/src/services/socket.ts b/frontend/src/services/socket.ts index da2f64a2b2..7b5b97337a 100644 --- a/frontend/src/services/socket.ts +++ b/frontend/src/services/socket.ts @@ -1,7 +1,7 @@ // import { toast } from "sonner"; +import toast from "#/utils/toast"; import { handleAssistantMessage } from "./actions"; import { getToken } from "./auth"; -import toast from "../utils/toast"; class Socket { private static _socket: WebSocket | null = null; diff --git a/frontend/src/state/agentSlice.tsx b/frontend/src/state/agentSlice.tsx index 308f34503b..9076a38960 100644 --- a/frontend/src/state/agentSlice.tsx +++ b/frontend/src/state/agentSlice.tsx @@ -1,5 +1,5 @@ import { createSlice } from "@reduxjs/toolkit"; -import AgentTaskState from "../types/AgentTaskState"; +import AgentTaskState from "#/types/AgentTaskState"; export const agentSlice = createSlice({ name: "agent", diff --git a/frontend/src/state/codeSlice.ts b/frontend/src/state/codeSlice.ts index 33e0426d8c..26e41766d9 100644 --- a/frontend/src/state/codeSlice.ts +++ b/frontend/src/state/codeSlice.ts @@ -1,7 +1,7 @@ import { createSlice } from "@reduxjs/toolkit"; import { INode, flattenTree } from "react-accessible-treeview"; import { IFlatMetadata } from "react-accessible-treeview/dist/TreeView/utils"; -import { WorkspaceFile } from "../services/fileService"; +import { WorkspaceFile } from "#/services/fileService"; export const initialState = { code: "# Welcome to OpenDevin!", diff --git a/frontend/src/state/planSlice.ts b/frontend/src/state/planSlice.ts index 2304fe9c41..77a23ba49c 100644 --- a/frontend/src/state/planSlice.ts +++ b/frontend/src/state/planSlice.ts @@ -1,5 +1,5 @@ import { createSlice } from "@reduxjs/toolkit"; -import { Plan, TaskState } from "../services/planService"; +import { Plan, TaskState } from "#/services/planService"; export const planSlice = createSlice({ name: "plan", diff --git a/frontend/src/state/settingsSlice.ts b/frontend/src/state/settingsSlice.ts index 04dcab03ce..d39ccb1689 100644 --- a/frontend/src/state/settingsSlice.ts +++ b/frontend/src/state/settingsSlice.ts @@ -1,6 +1,6 @@ import { createSlice } from "@reduxjs/toolkit"; import i18next from "i18next"; -import { ArgConfigType } from "../types/ConfigType"; +import { ArgConfigType } from "#/types/ConfigType"; export const settingsSlice = createSlice({ name: "settings", diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json index 620b737ede..02134fbe15 100644 --- a/frontend/tsconfig.json +++ b/frontend/tsconfig.json @@ -19,7 +19,11 @@ "isolatedModules": true, "noEmit": true, "jsx": "react", - "types": ["vite/client", "vitest/globals"] + "types": ["vite/client", "vitest/globals"], + "baseUrl": ".", + "paths": { + "#/*": ["./src/*"] + } }, "include": [ "src", diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts index cf36af6b08..dfc99abc06 100644 --- a/frontend/vite.config.ts +++ b/frontend/vite.config.ts @@ -2,6 +2,7 @@ import { defineConfig, loadEnv } from "vite"; import react from "@vitejs/plugin-react"; import viteTsconfigPaths from "vite-tsconfig-paths"; +import path from "path"; export default defineConfig(({ mode }) => { const {