From 539b467141623a0a959d720fbbeb01402f76fd90 Mon Sep 17 00:00:00 2001 From: Faisal Amir Date: Tue, 24 Oct 2023 10:59:12 +0700 Subject: [PATCH] ui: interface revamp (#429) * feat: adding create bot functionality Signed-off-by: James * update the temperature progress bar Signed-off-by: James * WIP baselayout * Mapping plugins with available preferences * Added loader component * WIP working another screen * Cleanup types and avoid import one by one * Prepare bottom bar * Add css variables colors to enable user select the accent * Enable change accent color * Seperate css variable * Fix conflict * Add blank state of my model empty * Restyle explore models page * Enable user config left sidebar * Restyle my models page * WIP styling chat page * Restyling chat message * Fix conflict * Adde form preferences setting plugins * Fixed form bot info * Sidebar bot chat * Showing rightbar for both setting when user created bot * Fix style bot info * Using overflow auto intead of scroll * Remove script built UI from root package * Fix missig import * Resolve error linter * fix e2e tests Signed-off-by: James --------- Signed-off-by: James Co-authored-by: James --- electron/main.ts | 41 +- electron/preload.ts | 30 +- electron/tests/main.e2e.spec.ts | 6 +- electron/tests/my-models.e2e.spec.ts | 2 +- electron/tests/navigation.e2e.spec.ts | 36 +- electron/tests/settings.e2e.spec.ts | 4 +- plugins/data-plugin/package.json | 6 +- plugins/inference-plugin/index.ts | 54 ++- .../_components/ActiveModelTable/index.tsx | 2 +- .../_components/AvailableModelCard/index.tsx | 3 +- web/app/_components/Avatar/index.tsx | 2 +- .../BasicPromptAccessories/index.tsx | 4 +- .../_components/BasicPromptButton/index.tsx | 2 +- .../_components/BasicPromptInput/index.tsx | 16 +- web/app/_components/BotInfo/index.tsx | 70 +-- .../_components/BotInfoContainer/index.tsx | 14 +- .../_components/BotListContainer/index.tsx | 26 +- web/app/_components/BotListModal/index.tsx | 10 +- web/app/_components/BotPreview/index.tsx | 20 +- web/app/_components/BotSetting/index.tsx | 162 ++++--- web/app/_components/CenterContainer/index.tsx | 12 +- web/app/_components/ChatBody/index.tsx | 9 +- .../ChatBody/renderChatMessage.tsx | 3 +- web/app/_components/ChatItem/index.tsx | 1 - web/app/_components/CompactLogo/index.tsx | 16 - .../ConfirmDeleteConversationModal/index.tsx | 21 +- .../ConfirmDeleteModelModal/index.tsx | 2 +- .../_components/ConfirmSignOutModal/index.tsx | 4 +- .../_components/ConversationalCard/index.tsx | 5 +- .../_components/ConversationalList/index.tsx | 1 - .../_components/CreateBotContainer/index.tsx | 63 ++- .../_components/CreateBotInAdvance/index.tsx | 98 ++++ .../CreateBotPromptInput/index.tsx | 33 +- .../CustomBotTemperature/index.tsx | 32 +- .../_components/DownloadedModelCard/index.tsx | 1 - .../DownloadedModelTable/index.tsx | 10 +- .../DownloadingModelTable/index.tsx | 3 +- .../DraggableProgressBar/index.tsx | 38 +- web/app/_components/DropdownBox/index.tsx | 4 +- .../_components/ExpandableHeader/index.tsx | 17 +- .../ExploreModelContainer/index.tsx | 2 +- .../_components/ExploreModelFilter/index.tsx | 2 +- .../_components/ExploreModelItem/index.tsx | 113 ++--- .../ExploreModelItemHeader/index.tsx | 42 +- .../_components/ExploreModelList/index.tsx | 28 -- web/app/_components/Footer/index.tsx | 23 - web/app/_components/HamburgerButton/index.tsx | 2 +- web/app/_components/HistoryItem/index.tsx | 58 +-- web/app/_components/HistoryList/index.tsx | 22 +- web/app/_components/InputToolbar/index.tsx | 43 +- web/app/_components/LeftContainer/index.tsx | 20 +- .../_components/LeftHeaderAction/index.tsx | 42 +- web/app/_components/LeftRibbonNav/index.tsx | 68 ++- web/app/_components/MainChat/index.tsx | 4 +- web/app/_components/MainContainer/index.tsx | 16 +- web/app/_components/MainHeader/index.tsx | 56 +-- web/app/_components/MainView/index.tsx | 6 +- web/app/_components/MenuHeader/index.tsx | 2 +- web/app/_components/MobileMenuPane/index.tsx | 2 +- .../_components/ModelActionButton/index.tsx | 33 +- web/app/_components/ModelActionMenu/index.tsx | 33 +- .../ModelDownloadingButton/index.tsx | 2 +- .../_components/ModelDownloadingRow/index.tsx | 4 +- .../ModelDownloadingTable/index.tsx | 1 - web/app/_components/ModelRow/index.tsx | 27 +- web/app/_components/ModelSearchBar/index.tsx | 2 +- web/app/_components/ModelSelector/index.tsx | 5 +- .../ModelStatusComponent/index.tsx | 12 +- web/app/_components/ModelTable/index.tsx | 37 +- .../_components/ModelTableHeader/index.tsx | 2 +- .../_components/ModelVersionItem/index.tsx | 21 +- .../_components/ModelVersionList/index.tsx | 25 +- web/app/_components/MonitorBar/index.tsx | 21 +- web/app/_components/Preferences.tsx | 8 +- web/app/_components/PrimaryButton/index.tsx | 6 +- web/app/_components/ProgressSetting/index.tsx | 2 +- web/app/_components/RightContainer/index.tsx | 18 +- web/app/_components/SearchBar/index.tsx | 2 +- web/app/_components/SecondaryButton/index.tsx | 12 +- web/app/_components/SendButton/index.tsx | 19 +- .../_components/SidebarEmptyHistory/index.tsx | 29 +- web/app/_components/SidebarMenuItem/index.tsx | 2 +- .../_components/SimpleControlNetMessage.tsx | 6 +- .../_components/SimpleImageMessage/index.tsx | 4 +- .../_components/SimpleTag/TagStyleMapper.ts | 27 +- web/app/_components/SimpleTag/index.tsx | 4 +- .../_components/SimpleTextMessage/index.tsx | 13 +- web/app/_components/SystemItem/index.tsx | 15 - .../_components/TextAreaWithTitle/index.tsx | 35 +- .../_components/TextInputWithTitle/index.tsx | 32 +- web/app/_components/ToggleSwitch/index.tsx | 32 +- .../_components/WelcomeContainer/index.tsx | 6 +- web/app/_helpers/ModalWrapper.tsx | 23 - web/app/_helpers/ThemeWrapper.tsx | 15 - web/app/_helpers/atoms/Bot.atom.ts | 4 - web/app/_hooks/useCreateBot.ts | 15 +- web/app/_hooks/useDeleteBot.ts | 33 +- web/app/_hooks/useGetBots.ts | 30 +- web/app/_hooks/useUpdateBot.ts | 32 +- web/app/_models/Bot.ts | 36 +- web/app/_models/Conversation.ts | 21 - web/app/_models/ModelVersion.ts | 23 - web/app/_models/Product.ts | 31 -- web/app/_models/ProductInput.ts | 23 - web/app/_models/ProductOutput.ts | 8 - web/app/_models/User.ts | 18 - web/app/globals.css | 429 ------------------ web/app/layout.tsx | 14 +- web/app/page.tsx | 135 ++---- web/app/privacy/page.tsx | 2 +- web/app/settings/page.tsx | 11 - web/app/support/page.tsx | 2 +- web/containers/BottomBar/index.tsx | 46 ++ .../JanImage/index.tsx | 0 web/containers/Layout/index.tsx | 73 +++ web/containers/Loader/index.tsx | 18 + web/containers/Logo/CompactLogo/index.tsx | 22 + web/containers/Providers/index.tsx | 92 ++++ web/containers/Sidebar/Left.tsx | 196 ++++++++ web/containers/Sidebar/Right.tsx | 12 + web/containers/Sidebar/index.tsx | 2 + web/containers/SystemItem/index.tsx | 13 + web/containers/Topbar/index.tsx | 51 +++ .../_helpers => helpers}/EventHandler.tsx | 7 +- .../EventListenerWrapper.tsx | 5 +- .../_helpers => helpers}/JotaiWrapper.tsx | 9 +- web/helpers/ModalWrapper.tsx | 23 + web/helpers/ThemeWrapper.tsx | 34 ++ web/helpers/atoms/Bot.atom.ts | 3 + .../atoms/ChatMessage.atom.ts | 1 - .../atoms/Conversation.atom.ts | 7 +- .../atoms/DownloadState.atom.ts | 1 - .../atoms/DownloadedModel.atom.ts | 1 - .../atoms/ExploreModelLoading.atom.ts | 0 .../atoms/MainView.atom.ts | 11 - .../_helpers => helpers}/atoms/Modal.atom.ts | 0 .../_helpers => helpers}/atoms/Model.atom.ts | 1 - .../atoms/SideBarExpand.atom.ts} | 4 +- .../atoms/SystemBar.atom.ts | 0 .../_helpers => helpers}/withAnalytics.tsx | 4 +- web/{app/_hooks => hooks}/useChatMessages.ts | 10 +- web/hooks/useCreateBot.ts | 14 + .../_hooks => hooks}/useCreateConversation.ts | 12 +- web/hooks/useDeleteBot.ts | 24 + .../_hooks => hooks}/useDeleteConversation.ts | 12 +- web/{app/_hooks => hooks}/useDeleteModel.ts | 5 +- web/{app/_hooks => hooks}/useDownloadModel.ts | 5 +- web/{app/_hooks => hooks}/useGetAppVersion.ts | 0 web/hooks/useGetBots.ts | 27 ++ .../useGetConfiguredModels.ts | 1 - .../_hooks => hooks}/useGetCurrentUser.ts | 12 +- .../useGetDownloadedModels.ts | 8 +- .../useGetHuggingFaceModel.ts | 4 +- .../useGetMostSuitableModelVersion.ts | 3 +- .../_hooks => hooks}/useGetPerformanceTag.ts | 4 +- .../_hooks => hooks}/useGetSystemResources.ts | 5 +- .../useGetUserConversations.ts | 5 +- web/{app/_hooks => hooks}/useInitModel.ts | 5 +- .../_hooks => hooks}/useSendChatMessage.ts | 10 +- web/{app/_hooks => hooks}/useSignIn.ts | 0 web/{app/_hooks => hooks}/useSignOut.ts | 0 .../_hooks => hooks}/useStartStopModel.ts | 4 +- web/hooks/useUpdateBot.ts | 36 ++ web/hooks/useUserConfigs.ts | 6 + web/{app/_models => models}/ChatMessage.ts | 0 web/models/User.ts | 6 + web/next.config.js | 1 + web/package.json | 11 +- web/screens/Bot/index.tsx | 13 + web/screens/Chat/EmptyChatScreen.tsx | 22 + web/screens/Chat/index.tsx | 27 ++ .../ExploreModels/ExploreModelList/index.tsx | 22 + web/screens/ExploreModels/index.tsx | 32 ++ web/screens/MyModels/index.tsx | 82 ++++ web/screens/Settings/Appearance/index.tsx | 33 ++ .../Settings/Appearance/toggleAccent.tsx | 63 +++ .../Settings/Appearance/toggleTheme.tsx | 66 +++ .../Settings/CorePlugins/PluginsCatalog.tsx | 190 ++++++++ .../CorePlugins/PreferencePlugins/index.tsx | 66 +++ web/screens/Settings/index.tsx | 174 +++++++ web/screens/Welcome/index.tsx | 38 ++ .../_services => services}/coreService.ts | 0 .../_services => services}/eventsService.ts | 0 .../_services => services}/pluginService.ts | 2 +- .../_services => services}/storeService.ts | 0 .../code-block.css => styles/code-block.scss} | 0 web/styles/global.scss | 25 + web/styles/loader.scss | 91 ++++ web/styles/main.scss | 9 + web/styles/variables.scss | 72 +++ web/tailwind.config.js | 48 +- web/tsconfig.json | 12 +- web/types/appearance.d.ts | 7 + web/types/bot.d.ts | 32 ++ web/types/chatMessage.d.ts | 62 +++ .../downloadState.d.ts} | 9 +- .../AssistantModel.ts => types/models.d.ts} | 56 +-- web/types/products.d.ts | 58 +++ .../searchModelParam.hf.d.ts} | 24 +- web/types/users.ts | 11 + web/uikit/button/index.tsx | 49 ++ web/uikit/icons/index.tsx | 13 + web/uikit/index.tsx | 4 + web/uikit/switch/index.tsx | 29 ++ web/uikit/toggle/index.tsx | 45 ++ web/{app/_utils => utils}/const.ts | 0 web/{app/_utils => utils}/converter.ts | 9 +- web/{app/_utils => utils}/datetime.ts | 0 web/{app/_utils => utils}/message.ts | 2 +- 209 files changed, 3286 insertions(+), 1913 deletions(-) delete mode 100644 web/app/_components/CompactLogo/index.tsx create mode 100644 web/app/_components/CreateBotInAdvance/index.tsx delete mode 100644 web/app/_components/ExploreModelList/index.tsx delete mode 100644 web/app/_components/Footer/index.tsx delete mode 100644 web/app/_components/SystemItem/index.tsx delete mode 100644 web/app/_helpers/ModalWrapper.tsx delete mode 100644 web/app/_helpers/ThemeWrapper.tsx delete mode 100644 web/app/_helpers/atoms/Bot.atom.ts delete mode 100644 web/app/_models/Conversation.ts delete mode 100644 web/app/_models/ModelVersion.ts delete mode 100644 web/app/_models/Product.ts delete mode 100644 web/app/_models/ProductInput.ts delete mode 100644 web/app/_models/ProductOutput.ts delete mode 100644 web/app/_models/User.ts delete mode 100644 web/app/globals.css delete mode 100644 web/app/settings/page.tsx create mode 100644 web/containers/BottomBar/index.tsx rename web/{app/_components => containers}/JanImage/index.tsx (100%) create mode 100644 web/containers/Layout/index.tsx create mode 100644 web/containers/Loader/index.tsx create mode 100644 web/containers/Logo/CompactLogo/index.tsx create mode 100644 web/containers/Providers/index.tsx create mode 100644 web/containers/Sidebar/Left.tsx create mode 100644 web/containers/Sidebar/Right.tsx create mode 100644 web/containers/Sidebar/index.tsx create mode 100644 web/containers/SystemItem/index.tsx create mode 100644 web/containers/Topbar/index.tsx rename web/{app/_helpers => helpers}/EventHandler.tsx (89%) rename web/{app/_helpers => helpers}/EventListenerWrapper.tsx (91%) rename web/{app/_helpers => helpers}/JotaiWrapper.tsx (70%) create mode 100644 web/helpers/ModalWrapper.tsx create mode 100644 web/helpers/ThemeWrapper.tsx create mode 100644 web/helpers/atoms/Bot.atom.ts rename web/{app/_helpers => helpers}/atoms/ChatMessage.atom.ts (97%) rename web/{app/_helpers => helpers}/atoms/Conversation.atom.ts (94%) rename web/{app/_helpers => helpers}/atoms/DownloadState.atom.ts (93%) rename web/{app/_helpers => helpers}/atoms/DownloadedModel.atom.ts (74%) rename web/{app/_helpers => helpers}/atoms/ExploreModelLoading.atom.ts (100%) rename web/{app/_helpers => helpers}/atoms/MainView.atom.ts (80%) rename web/{app/_helpers => helpers}/atoms/Modal.atom.ts (100%) rename web/{app/_helpers => helpers}/atoms/Model.atom.ts (77%) rename web/{app/_helpers/atoms/LeftSideBarExpand.atom.ts => helpers/atoms/SideBarExpand.atom.ts} (56%) rename web/{app/_helpers => helpers}/atoms/SystemBar.atom.ts (100%) rename web/{app/_helpers => helpers}/withAnalytics.tsx (82%) rename web/{app/_hooks => hooks}/useChatMessages.ts (86%) create mode 100644 web/hooks/useCreateBot.ts rename web/{app/_hooks => hooks}/useCreateConversation.ts (85%) create mode 100644 web/hooks/useDeleteBot.ts rename web/{app/_hooks => hooks}/useDeleteConversation.ts (84%) rename web/{app/_hooks => hooks}/useDeleteModel.ts (75%) rename web/{app/_hooks => hooks}/useDownloadModel.ts (88%) rename web/{app/_hooks => hooks}/useGetAppVersion.ts (100%) create mode 100644 web/hooks/useGetBots.ts rename web/{app/_hooks => hooks}/useGetConfiguredModels.ts (92%) rename web/{app/_hooks => hooks}/useGetCurrentUser.ts (83%) rename web/{app/_hooks => hooks}/useGetDownloadedModels.ts (72%) rename web/{app/_hooks => hooks}/useGetHuggingFaceModel.ts (82%) rename web/{app/_hooks => hooks}/useGetMostSuitableModelVersion.ts (87%) rename web/{app/_hooks => hooks}/useGetPerformanceTag.ts (92%) rename web/{app/_hooks => hooks}/useGetSystemResources.ts (83%) rename web/{app/_hooks => hooks}/useGetUserConversations.ts (83%) rename web/{app/_hooks => hooks}/useInitModel.ts (81%) rename web/{app/_hooks => hooks}/useSendChatMessage.ts (89%) rename web/{app/_hooks => hooks}/useSignIn.ts (100%) rename web/{app/_hooks => hooks}/useSignOut.ts (100%) rename web/{app/_hooks => hooks}/useStartStopModel.ts (85%) create mode 100644 web/hooks/useUpdateBot.ts create mode 100644 web/hooks/useUserConfigs.ts rename web/{app/_models => models}/ChatMessage.ts (100%) create mode 100644 web/models/User.ts create mode 100644 web/screens/Bot/index.tsx create mode 100644 web/screens/Chat/EmptyChatScreen.tsx create mode 100644 web/screens/Chat/index.tsx create mode 100644 web/screens/ExploreModels/ExploreModelList/index.tsx create mode 100644 web/screens/ExploreModels/index.tsx create mode 100644 web/screens/MyModels/index.tsx create mode 100644 web/screens/Settings/Appearance/index.tsx create mode 100644 web/screens/Settings/Appearance/toggleAccent.tsx create mode 100644 web/screens/Settings/Appearance/toggleTheme.tsx create mode 100644 web/screens/Settings/CorePlugins/PluginsCatalog.tsx create mode 100644 web/screens/Settings/CorePlugins/PreferencePlugins/index.tsx create mode 100644 web/screens/Settings/index.tsx create mode 100644 web/screens/Welcome/index.tsx rename web/{app/_services => services}/coreService.ts (100%) rename web/{app/_services => services}/eventsService.ts (100%) rename web/{app/_services => services}/pluginService.ts (95%) rename web/{app/_services => services}/storeService.ts (100%) rename web/{app/code-block.css => styles/code-block.scss} (100%) create mode 100644 web/styles/global.scss create mode 100644 web/styles/loader.scss create mode 100644 web/styles/main.scss create mode 100644 web/styles/variables.scss create mode 100644 web/types/appearance.d.ts create mode 100644 web/types/bot.d.ts create mode 100644 web/types/chatMessage.d.ts rename web/{app/_models/DownloadState.ts => types/downloadState.d.ts} (61%) rename web/{app/_models/AssistantModel.ts => types/models.d.ts} (59%) create mode 100644 web/types/products.d.ts rename web/{app/_models/hf/SearchModelParam.hf.ts => types/searchModelParam.hf.d.ts} (95%) create mode 100644 web/types/users.ts create mode 100644 web/uikit/button/index.tsx create mode 100644 web/uikit/icons/index.tsx create mode 100644 web/uikit/index.tsx create mode 100644 web/uikit/switch/index.tsx create mode 100644 web/uikit/toggle/index.tsx rename web/{app/_utils => utils}/const.ts (100%) rename web/{app/_utils => utils}/converter.ts (86%) rename web/{app/_utils => utils}/datetime.ts (100%) rename web/{app/_utils => utils}/message.ts (92%) diff --git a/electron/main.ts b/electron/main.ts index 9a4daacc6..22a5278b7 100644 --- a/electron/main.ts +++ b/electron/main.ts @@ -1,4 +1,11 @@ -import { app, BrowserWindow, ipcMain, dialog, shell } from "electron"; +import { + app, + BrowserWindow, + ipcMain, + dialog, + shell, + nativeTheme, +} from "electron"; import { readdirSync, writeFileSync } from "fs"; import { resolve, join, extname } from "path"; import { rmdir, unlink, createWriteStream } from "fs"; @@ -36,12 +43,30 @@ app.on("window-all-closed", () => { app.quit(); }); +ipcMain.handle("setNativeThemeLight", () => { + nativeTheme.themeSource = "light"; +}); + +ipcMain.handle("setNativeThemeDark", () => { + nativeTheme.themeSource = "dark"; +}); + +ipcMain.handle("setNativeThemeSystem", () => { + nativeTheme.themeSource = "system"; +}); + function createMainWindow() { mainWindow = new BrowserWindow({ width: 1200, height: 800, + frame: false, show: false, - backgroundColor: "white", + trafficLightPosition: { + x: 16, + y: 10, + }, + titleBarStyle: "hidden", + vibrancy: "sidebar", webPreferences: { nodeIntegration: true, preload: join(__dirname, "preload.js"), @@ -118,11 +143,13 @@ function handleIPCs() { ipcMain.handle( "invokePluginFunc", async (_event, modulePath, method, ...args) => { - const module = require(/* webpackIgnore: true */ join( - app.getPath("userData"), - "plugins", - modulePath - )); + const module = require( + /* webpackIgnore: true */ join( + app.getPath("userData"), + "plugins", + modulePath + ) + ); requiredModules[modulePath] = module; if (typeof module[method] === "function") { diff --git a/electron/preload.ts b/electron/preload.ts index a52a76c81..dac5aef6f 100644 --- a/electron/preload.ts +++ b/electron/preload.ts @@ -9,6 +9,12 @@ contextBridge.exposeInMainWorld("electronAPI", { invokePluginFunc: (plugin: any, method: any, ...args: any[]) => ipcRenderer.invoke("invokePluginFunc", plugin, method, ...args), + setNativeThemeLight: () => ipcRenderer.invoke("setNativeThemeLight"), + + setNativeThemeDark: () => ipcRenderer.invoke("setNativeThemeDark"), + + setNativeThemeSystem: () => ipcRenderer.invoke("setNativeThemeSystem"), + basePlugins: () => ipcRenderer.invoke("basePlugins"), pluginPath: () => ipcRenderer.invoke("pluginPath"), @@ -23,19 +29,27 @@ contextBridge.exposeInMainWorld("electronAPI", { deleteFile: (filePath: string) => ipcRenderer.invoke("deleteFile", filePath), - installRemotePlugin: (pluginName: string) => ipcRenderer.invoke("installRemotePlugin", pluginName), + installRemotePlugin: (pluginName: string) => + ipcRenderer.invoke("installRemotePlugin", pluginName), - downloadFile: (url: string, path: string) => ipcRenderer.invoke("downloadFile", url, path), + downloadFile: (url: string, path: string) => + ipcRenderer.invoke("downloadFile", url, path), - onFileDownloadUpdate: (callback: any) => ipcRenderer.on("FILE_DOWNLOAD_UPDATE", callback), + onFileDownloadUpdate: (callback: any) => + ipcRenderer.on("FILE_DOWNLOAD_UPDATE", callback), - onFileDownloadError: (callback: any) => ipcRenderer.on("FILE_DOWNLOAD_ERROR", callback), + onFileDownloadError: (callback: any) => + ipcRenderer.on("FILE_DOWNLOAD_ERROR", callback), - onFileDownloadSuccess: (callback: any) => ipcRenderer.on("FILE_DOWNLOAD_COMPLETE", callback), + onFileDownloadSuccess: (callback: any) => + ipcRenderer.on("FILE_DOWNLOAD_COMPLETE", callback), - onAppUpdateDownloadUpdate: (callback: any) => ipcRenderer.on("APP_UPDATE_PROGRESS", callback), + onAppUpdateDownloadUpdate: (callback: any) => + ipcRenderer.on("APP_UPDATE_PROGRESS", callback), - onAppUpdateDownloadError: (callback: any) => ipcRenderer.on("APP_UPDATE_ERROR", callback), + onAppUpdateDownloadError: (callback: any) => + ipcRenderer.on("APP_UPDATE_ERROR", callback), - onAppUpdateDownloadSuccess: (callback: any) => ipcRenderer.on("APP_UPDATE_COMPLETE", callback), + onAppUpdateDownloadSuccess: (callback: any) => + ipcRenderer.on("APP_UPDATE_COMPLETE", callback), }); diff --git a/electron/tests/main.e2e.spec.ts b/electron/tests/main.e2e.spec.ts index 85c3d5c7a..d6df31ca4 100644 --- a/electron/tests/main.e2e.spec.ts +++ b/electron/tests/main.e2e.spec.ts @@ -48,10 +48,8 @@ test("renders the home page", async () => { // Welcome text is available const welcomeText = await page - .locator(".text-5xl", { - hasText: "Welcome,let’s download your first model", - }) + .getByTestId("testid-welcome-title") .first() - .isDisabled(); + .isVisible(); expect(welcomeText).toBe(false); }); diff --git a/electron/tests/my-models.e2e.spec.ts b/electron/tests/my-models.e2e.spec.ts index c52f1a0aa..627612ea8 100644 --- a/electron/tests/my-models.e2e.spec.ts +++ b/electron/tests/my-models.e2e.spec.ts @@ -40,7 +40,7 @@ test("shows my models", async () => { .getByRole("heading") .filter({ hasText: "My Models" }) .first() - .isDisabled(); + .isVisible(); expect(header).toBe(false); // More test cases here... }); diff --git a/electron/tests/navigation.e2e.spec.ts b/electron/tests/navigation.e2e.spec.ts index 554a7b4d7..90220d5db 100644 --- a/electron/tests/navigation.e2e.spec.ts +++ b/electron/tests/navigation.e2e.spec.ts @@ -35,37 +35,13 @@ test.afterAll(async () => { }); test("renders left navigation panel", async () => { - // Chat History section is available - const chatSection = await page - .getByRole("heading") - .filter({ hasText: "CHAT HISTORY" }) - .first() - .isDisabled(); + // Chat section should be there + const chatSection = await page.getByTestId("Chat").first().isVisible(); expect(chatSection).toBe(false); // Home actions - const createBotBtn = await page - .getByRole("button", { name: "Create bot" }) - .first() - .isEnabled(); - const exploreBtn = await page - .getByRole("button", { name: "Explore Models" }) - .first() - .isEnabled(); - const myModelsBtn = await page - .getByTestId("My Models") - .first() - .isEnabled(); - const settingsBtn = await page - .getByTestId("Settings") - .first() - .isEnabled(); - expect( - [ - createBotBtn, - exploreBtn, - myModelsBtn, - settingsBtn, - ].filter((e) => !e).length - ).toBe(0); + const botBtn = await page.getByTestId("Bot").first().isEnabled(); + const myModelsBtn = await page.getByTestId("My Models").first().isEnabled(); + const settingsBtn = await page.getByTestId("Settings").first().isEnabled(); + expect([botBtn, myModelsBtn, settingsBtn].filter((e) => !e).length).toBe(0); }); diff --git a/electron/tests/settings.e2e.spec.ts b/electron/tests/settings.e2e.spec.ts index dacefd380..2f8d6465b 100644 --- a/electron/tests/settings.e2e.spec.ts +++ b/electron/tests/settings.e2e.spec.ts @@ -36,7 +36,5 @@ test.afterAll(async () => { test("shows settings", async () => { await page.getByTestId("Settings").first().click(); - - const pluginList = await page.getByTestId("plugin-item").count(); - expect(pluginList).toBe(4); + await page.getByTestId("testid-setting-description").isVisible(); }); diff --git a/plugins/data-plugin/package.json b/plugins/data-plugin/package.json index df62a56ba..5ada2f7ed 100644 --- a/plugins/data-plugin/package.json +++ b/plugins/data-plugin/package.json @@ -43,9 +43,5 @@ "@janhq/core": "^0.1.6", "pouchdb-find": "^8.0.1", "pouchdb-node": "^8.0.1" - }, - "bundleDependencies": [ - "pouchdb-node", - "pouchdb-find" - ] + } } diff --git a/plugins/inference-plugin/index.ts b/plugins/inference-plugin/index.ts index d8f73a218..04ed4b0f0 100644 --- a/plugins/inference-plugin/index.ts +++ b/plugins/inference-plugin/index.ts @@ -9,13 +9,17 @@ import { } from "@janhq/core"; import { Observable } from "rxjs"; -const initModel = async (product) => invokePluginFunc(MODULE_PATH, "initModel", product); +const initModel = async (product) => + invokePluginFunc(MODULE_PATH, "initModel", product); const stopModel = () => { invokePluginFunc(MODULE_PATH, "killSubprocess"); }; -function requestInference(recentMessages: any[], bot?: any): Observable { +function requestInference( + recentMessages: any[], + bot?: any +): Observable { return new Observable((subscriber) => { const requestBody = JSON.stringify({ messages: recentMessages, @@ -69,10 +73,15 @@ function requestInference(recentMessages: any[], bot?: any): Observable async function retrieveLastTenMessages(conversationId: string, bot?: any) { // TODO: Common collections should be able to access via core functions instead of store - const messageHistory = (await store.findMany("messages", { conversationId }, [{ createdAt: "asc" }])) ?? []; + const messageHistory = + (await store.findMany("messages", { conversationId }, [ + { createdAt: "asc" }, + ])) ?? []; let recentMessages = messageHistory - .filter((e) => e.message !== "" && (e.user === "user" || e.user === "assistant")) + .filter( + (e) => e.message !== "" && (e.user === "user" || e.user === "assistant") + ) .slice(-9) .map((message) => ({ content: message.message.trim(), @@ -81,10 +90,13 @@ async function retrieveLastTenMessages(conversationId: string, bot?: any) { if (bot && bot.systemPrompt) { // append bot's system prompt - recentMessages = [{ - content: `[INST] ${bot.systemPrompt}`, - role: 'system' - },...recentMessages]; + recentMessages = [ + { + content: `[INST] ${bot.systemPrompt}`, + role: "system", + }, + ...recentMessages, + ]; } console.debug(`Last 10 messages: ${JSON.stringify(recentMessages, null, 2)}`); @@ -93,13 +105,19 @@ async function retrieveLastTenMessages(conversationId: string, bot?: any) { } async function handleMessageRequest(data: NewMessageRequest) { - const conversation = await store.findOne("conversations", data.conversationId); + const conversation = await store.findOne( + "conversations", + data.conversationId + ); let bot = undefined; if (conversation.botId != null) { bot = await store.findOne("bots", conversation.botId); } - - const recentMessages = await retrieveLastTenMessages(data.conversationId, bot); + + const recentMessages = await retrieveLastTenMessages( + data.conversationId, + bot + ); const message = { ...data, message: "", @@ -124,7 +142,8 @@ async function handleMessageRequest(data: NewMessageRequest) { await store.updateOne("messages", message._id, message); }, error: async (err) => { - message.message = message.message.trim() + "\n" + "Error occurred: " + err; + message.message = + message.message.trim() + "\n" + "Error occurred: " + err; // TODO: Common collections should be able to access via core functions instead of store await store.updateOne("messages", message._id, message); }, @@ -140,7 +159,10 @@ async function inferenceRequest(data: NewMessageRequest): Promise { }; return new Promise(async (resolve, reject) => { const recentMessages = await retrieveLastTenMessages(data.conversationId); - requestInference([...recentMessages, { role: "user", content: data.message }]).subscribe({ + requestInference([ + ...recentMessages, + { role: "user", content: data.message }, + ]).subscribe({ next: (content) => { message.message = content; }, @@ -166,5 +188,9 @@ export function init({ register }) { register(PluginService.OnStart, PLUGIN_NAME, onStart); register(InferenceService.InitModel, initModel.name, initModel); register(InferenceService.StopModel, stopModel.name, stopModel); - register(InferenceService.InferenceRequest, inferenceRequest.name, inferenceRequest); + register( + InferenceService.InferenceRequest, + inferenceRequest.name, + inferenceRequest + ); } diff --git a/web/app/_components/ActiveModelTable/index.tsx b/web/app/_components/ActiveModelTable/index.tsx index eae2ed565..3a477ba5c 100644 --- a/web/app/_components/ActiveModelTable/index.tsx +++ b/web/app/_components/ActiveModelTable/index.tsx @@ -1,7 +1,7 @@ import { useAtomValue } from 'jotai' import React from 'react' import ModelTable from '../ModelTable' -import { activeAssistantModelAtom } from '@/_helpers/atoms/Model.atom' +import { activeAssistantModelAtom } from '@helpers/atoms/Model.atom' const ActiveModelTable: React.FC = () => { const activeModel = useAtomValue(activeAssistantModelAtom) diff --git a/web/app/_components/AvailableModelCard/index.tsx b/web/app/_components/AvailableModelCard/index.tsx index 8d69b2880..9773dfb85 100644 --- a/web/app/_components/AvailableModelCard/index.tsx +++ b/web/app/_components/AvailableModelCard/index.tsx @@ -2,8 +2,7 @@ import DownloadModelContent from '../DownloadModelContent' import ModelDownloadButton from '../ModelDownloadButton' import ModelDownloadingButton from '../ModelDownloadingButton' import { useAtomValue } from 'jotai' -import { modelDownloadStateAtom } from '@/_helpers/atoms/DownloadState.atom' -import { AssistantModel } from '@/_models/AssistantModel' +import { modelDownloadStateAtom } from '@helpers/atoms/DownloadState.atom' type Props = { model: AssistantModel diff --git a/web/app/_components/Avatar/index.tsx b/web/app/_components/Avatar/index.tsx index 4b7259e3e..51e5e1d59 100644 --- a/web/app/_components/Avatar/index.tsx +++ b/web/app/_components/Avatar/index.tsx @@ -7,7 +7,7 @@ type Props = { const Avatar: React.FC = ({ allowEdit = false }) => (
- + { const setShowingAdvancedPrompt = useSetAtom(showingAdvancedPromptAtom) @@ -11,7 +11,7 @@ const BasicPromptAccessories: React.FC = () => { const shouldShowAdvancedPrompt = false return ( -
+
{/* Add future accessories here, e.g upload a file */}
diff --git a/web/app/_components/BasicPromptButton/index.tsx b/web/app/_components/BasicPromptButton/index.tsx index 58bc6abc4..3e9bd0ec8 100644 --- a/web/app/_components/BasicPromptButton/index.tsx +++ b/web/app/_components/BasicPromptButton/index.tsx @@ -1,7 +1,7 @@ import React from 'react' import { useSetAtom } from 'jotai' import { ChevronLeftIcon } from '@heroicons/react/24/outline' -import { showingAdvancedPromptAtom } from '@/_helpers/atoms/Modal.atom' +import { showingAdvancedPromptAtom } from '@helpers/atoms/Modal.atom' const BasicPromptButton: React.FC = () => { const setShowingAdvancedPrompt = useSetAtom(showingAdvancedPromptAtom) diff --git a/web/app/_components/BasicPromptInput/index.tsx b/web/app/_components/BasicPromptInput/index.tsx index d6e2f2d83..bb2eeb8e0 100644 --- a/web/app/_components/BasicPromptInput/index.tsx +++ b/web/app/_components/BasicPromptInput/index.tsx @@ -1,11 +1,11 @@ 'use client' -import { currentPromptAtom } from '@/_helpers/JotaiWrapper' -import { getActiveConvoIdAtom } from '@/_helpers/atoms/Conversation.atom' -import { selectedModelAtom } from '@/_helpers/atoms/Model.atom' -import useCreateConversation from '@/_hooks/useCreateConversation' -import useInitModel from '@/_hooks/useInitModel' -import useSendChatMessage from '@/_hooks/useSendChatMessage' +import { currentPromptAtom } from '@helpers/JotaiWrapper' +import { getActiveConvoIdAtom } from '@helpers/atoms/Conversation.atom' +import { selectedModelAtom } from '@helpers/atoms/Model.atom' +import useCreateConversation from '@hooks/useCreateConversation' +import useInitModel from '@hooks/useInitModel' +import useSendChatMessage from '@hooks/useSendChatMessage' import { useAtom, useAtomValue } from 'jotai' import { ChangeEvent, useEffect, useRef } from 'react' @@ -68,7 +68,7 @@ const BasicPromptInput: React.FC = () => { } return ( -
+