Nicholai/jan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'main' into jan-182-drake

Browse Source
This commit is contained in:
0xSage 2023-10-03 11:14:09 +08:00 committed by GitHub
commit 67cd44353e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
84 changed files with 2011 additions and 861 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
electron/core/plugins/data-plugin/module.ts
View File

@ -168,7 +168,7 @@ function getFinishedDownloadModels() {
const query = `SELECT * FROM models WHERE finish_download_at != -1 ORDER BY finish_download_at DESC`;
db.all(query, (err: Error, row: any) => {
res(row);
res(row.map((item: any) => parseToProduct(item)));
});
db.close();
});
@ -184,6 +184,7 @@ function deleteDownloadModel(modelId: string) {
const stmt = db.prepare("DELETE FROM models WHERE id = ?");
stmt.run(modelId);
stmt.finalize();
res(modelId);
});
db.close();
@ -352,7 +353,7 @@ function deleteConversation(id: any) {
);
deleteMessages.run(id);
deleteMessages.finalize();
res([]);
res(id);
});
db.close();
@ -373,6 +374,31 @@ function getConversationMessages(conversation_id: any) {
});
}
function parseToProduct(row: any) {
const product = {
id: row.id,
slug: row.slug,
name: row.name,
description: row.description,
avatarUrl: row.avatar_url,
longDescription: row.long_description,
technicalDescription: row.technical_description,
author: row.author,
version: row.version,
modelUrl: row.model_url,
nsfw: row.nsfw,
greeting: row.greeting,
type: row.type,
inputs: row.inputs,
outputs: row.outputs,
createdAt: new Date(row.created_at),
updatedAt: new Date(row.updated_at),
fileName: row.file_name,
downloadUrl: row.download_url,
};
return product;
}
module.exports = {
init,
getConversations,

13
electron/core/plugins/inference-plugin/module.js
View File

@ -2,18 +2,9 @@ const path = require("path");
const { app, dialog } = require("electron");
const { spawn } = require("child_process");
const fs = require("fs");
var exec = require("child_process").exec;
let subprocess = null;
process.on("exit", () => {
// Perform cleanup tasks here
console.log("kill subprocess on exit");
if (subprocess) {
subprocess.kill();
}
});
async function initModel(product) {
// fileName fallback
if (!product.fileName) {
@ -80,7 +71,7 @@ async function initModel(product) {
});
}
function killSubprocess() {
function dispose() {
if (subprocess) {
subprocess.kill();
subprocess = null;
@ -92,5 +83,5 @@ function killSubprocess() {
module.exports = {
initModel,
killSubprocess,
dispose,
};

196
electron/main.ts
View File

@ -1,30 +1,42 @@
import {
app,
BrowserWindow,
screen as electronScreen,
ipcMain,
dialog,
shell,
} from "electron";
import { app, BrowserWindow, ipcMain, dialog, shell } from "electron";
import { readdirSync } from "fs";
import { resolve, join, extname } from "path";
import { rmdir, unlink, createWriteStream } from "fs";
import isDev = require("electron-is-dev");
import { init } from "./core/plugin-manager/pluginMgr";
import { setupMenu } from "./utils/menu";
import { dispose } from "./utils/disposable";
const isDev = require("electron-is-dev");
const request = require("request");
const progress = require("request-progress");
const { autoUpdater } = require("electron-updater");
const Store = require("electron-store");
// @ts-ignore
import request = require("request");
// @ts-ignore
import progress = require("request-progress");
const requiredModules: Record<string, any> = {};
let mainWindow: BrowserWindow | undefined = undefined;
const store = new Store();
autoUpdater.autoDownload = false;
autoUpdater.autoInstallOnAppQuit = true;
app
.whenReady()
.then(migratePlugins)
.then(setupPlugins)
.then(setupMenu)
.then(handleIPCs)
.then(handleAppUpdates)
.then(createMainWindow)
.then(() => {
app.on("activate", () => {
if (!BrowserWindow.getAllWindows().length) {
createMainWindow();
}
});
});
const createMainWindow = () => {
app.on("window-all-closed", () => {
dispose(requiredModules);
app.quit();
});
function createMainWindow() {
mainWindow = new BrowserWindow({
width: 1200,
height: 800,
@ -37,26 +49,6 @@ const createMainWindow = () => {
},
});
ipcMain.handle(
"invokePluginFunc",
async (_event, modulePath, method, ...args) => {
const module = join(app.getPath("userData"), "plugins", modulePath);
return await import(/* webpackIgnore: true */ module)
.then((plugin) => {
if (typeof plugin[method] === "function") {
return plugin[method](...args);
} else {
console.log(plugin[method]);
console.error(`Function "${method}" does not exist in the module.`);
}
})
.then((res) => {
return res;
})
.catch((err) => console.log(err));
}
);
const startURL = isDev
? "http://localhost:3000"
: `file://${join(__dirname, "../renderer/index.html")}`;
@ -69,17 +61,69 @@ const createMainWindow = () => {
});
if (isDev) mainWindow.webContents.openDevTools();
};
}
app
.whenReady()
.then(migratePlugins)
.then(() => {
createMainWindow();
setupPlugins();
function handleAppUpdates() {
/*New Update Available*/
autoUpdater.on("update-available", async (_info: any) => {
const action = await dialog.showMessageBox({
message: `Update available. Do you want to download the latest update?`,
buttons: ["Download", "Later"],
});
if (action.response === 0) await autoUpdater.downloadUpdate();
});
/*App Update Completion Message*/
autoUpdater.on("update-downloaded", async (_info: any) => {
mainWindow?.webContents.send("APP_UPDATE_COMPLETE", {});
const action = await dialog.showMessageBox({
message: `Update downloaded. Please restart the application to apply the updates.`,
buttons: ["Restart", "Later"],
});
if (action.response === 0) {
autoUpdater.quitAndInstall();
}
});
/*App Update Error */
autoUpdater.on("error", (info: any) => {
dialog.showMessageBox({ message: info.message });
mainWindow?.webContents.send("APP_UPDATE_ERROR", {});
});
/*App Update Progress */
autoUpdater.on("download-progress", (progress: any) => {
console.log("app update progress: ", progress.percent);
mainWindow?.webContents.send("APP_UPDATE_PROGRESS", {
percent: progress.percent,
});
});
autoUpdater.autoDownload = false;
autoUpdater.autoInstallOnAppQuit = true;
autoUpdater.checkForUpdates();
}
ipcMain.handle("basePlugins", async (event) => {
function handleIPCs() {
ipcMain.handle(
"invokePluginFunc",
async (_event, modulePath, method, ...args) => {
const module = require(/* webpackIgnore: true */ join(
app.getPath("userData"),
"plugins",
modulePath
));
requiredModules[modulePath] = module;
if (typeof module[method] === "function") {
return module[method](...args);
} else {
console.log(module[method]);
console.error(`Function "${method}" does not exist in the module.`);
}
}
);
ipcMain.handle("basePlugins", async (_event) => {
const basePluginPath = join(
__dirname,
"../",
@ -90,13 +134,13 @@ app
.map((file) => join(basePluginPath, file));
});
ipcMain.handle("pluginPath", async (event) => {
ipcMain.handle("pluginPath", async (_event) => {
return join(app.getPath("userData"), "plugins");
});
ipcMain.handle("appVersion", async (event) => {
ipcMain.handle("appVersion", async (_event) => {
return app.getVersion();
});
ipcMain.handle("openExternalUrl", async (event, url) => {
ipcMain.handle("openExternalUrl", async (_event, url) => {
shell.openExternal(url);
});
@ -116,9 +160,7 @@ app
} else {
result = "File deleted successfully";
}
console.log(
`Delete file ${filePath} from ${fullPath} result: ${result}`
);
console.log(`Delete file ${filePath} from ${fullPath} result: ${result}`);
});
return result;
@ -151,57 +193,11 @@ app
})
.pipe(createWriteStream(destination));
});
app.on("activate", () => {
if (!BrowserWindow.getAllWindows().length) {
createMainWindow();
}
});
});
/*New Update Available*/
autoUpdater.on("update-available", async (info: any) => {
const action = await dialog.showMessageBox({
message: `Update available. Do you want to download the latest update?`,
buttons: ["Download", "Later"],
});
if (action.response === 0) await autoUpdater.downloadUpdate();
});
/*App Update Completion Message*/
autoUpdater.on("update-downloaded", async (info: any) => {
mainWindow?.webContents.send("APP_UPDATE_COMPLETE", {});
const action = await dialog.showMessageBox({
message: `Update downloaded. Please restart the application to apply the updates.`,
buttons: ["Restart", "Later"],
});
if (action.response === 0) {
autoUpdater.quitAndInstall();
}
});
/*App Update Error */
autoUpdater.on("error", (info: any) => {
dialog.showMessageBox({ message: info.message });
mainWindow?.webContents.send("APP_UPDATE_ERROR", {});
});
/*App Update Progress */
autoUpdater.on("download-progress", (progress: any) => {
console.log("app update progress: ", progress.percent);
mainWindow?.webContents.send("APP_UPDATE_PROGRESS", {
percent: progress.percent,
});
});
app.on("window-all-closed", () => {
if (process.platform !== "darwin") {
app.quit();
}
});
function migratePlugins() {
return new Promise((resolve) => {
const store = new Store();
if (store.get("migrated_version") !== app.getVersion()) {
console.log("start migration:", store.get("migrated_version"));
const userDataPath = app.getPath("userData");
@ -217,12 +213,12 @@ function migratePlugins() {
resolve(undefined);
}
});
};
}
function setupPlugins() {
init({
// Function to check from the main process that user wants to install a plugin
confirmInstall: async (plugins: string[]) => {
confirmInstall: async (_plugins: string[]) => {
return true;
},
// Path to install plugin to

2
electron/package.json
View File

@ -11,7 +11,7 @@
"files": [
"renderer/**/*",
"build/*.{js,map}",
"build/core/plugin-manager/**/*",
"build/**/*.{js,map}",
"core/pre-install"
],
"asarUnpack": [

8
electron/utils/disposable.ts Normal file
View File

@ -0,0 +1,8 @@
export function dispose(requiredModules: Record<string, any>) {
for (const key in requiredModules) {
const module = requiredModules[key];
if (typeof module["dispose"] === "function") {
module["dispose"]();
}
}
}

111
electron/utils/menu.ts Normal file
View File

@ -0,0 +1,111 @@
// @ts-nocheck
const { app, Menu, dialog } = require("electron");
const isMac = process.platform === "darwin";
const { autoUpdater } = require("electron-updater");
import { compareSemanticVersions } from "./versionDiff";
const template: (Electron.MenuItemConstructorOptions | Electron.MenuItem)[] = [
...(isMac
? [
{
label: app.name,
submenu: [
{ role: "about" },
{
label: "Check for Updates...",
click: () =>
autoUpdater.checkForUpdatesAndNotify().then((e) => {
if (
!e ||
compareSemanticVersions(
app.getVersion(),
e.updateInfo.version
) >= 0
)
dialog.showMessageBox({
message: `There are currently no updates available.`,
});
}),
},
{ type: "separator" },
{ role: "services" },
{ type: "separator" },
{ role: "hide" },
{ role: "hideOthers" },
{ role: "unhide" },
{ type: "separator" },
{ role: "quit" },
],
},
]
: []),
{
label: "Edit",
submenu: [
{ role: "undo" },
{ role: "redo" },
{ type: "separator" },
{ role: "cut" },
{ role: "copy" },
{ role: "paste" },
...(isMac
? [
{ role: "pasteAndMatchStyle" },
{ role: "delete" },
{ role: "selectAll" },
{ type: "separator" },
{
label: "Speech",
submenu: [{ role: "startSpeaking" }, { role: "stopSpeaking" }],
},
]
: [{ role: "delete" }, { type: "separator" }, { role: "selectAll" }]),
],
},
{
label: "View",
submenu: [
{ role: "reload" },
{ role: "forceReload" },
{ role: "toggleDevTools" },
{ type: "separator" },
{ role: "resetZoom" },
{ role: "zoomIn" },
{ role: "zoomOut" },
{ type: "separator" },
{ role: "togglefullscreen" },
],
},
{
label: "Window",
submenu: [
{ role: "minimize" },
{ role: "zoom" },
...(isMac
? [
{ type: "separator" },
{ role: "front" },
{ type: "separator" },
{ role: "window" },
]
: [{ role: "close" }]),
],
},
{
role: "help",
submenu: [
{
label: "Learn More",
click: async () => {
const { shell } = require("electron");
await shell.openExternal("https://jan.ai/");
},
},
],
},
];
export const setupMenu = () => {
const menu = Menu.buildFromTemplate(template);
Menu.setApplicationMenu(menu);
};

21
electron/utils/versionDiff.ts Normal file
View File

@ -0,0 +1,21 @@
export const compareSemanticVersions = (a: string, b: string) => {
// 1. Split the strings into their parts.
const a1 = a.split('.');
const b1 = b.split('.');
// 2. Contingency in case there's a 4th or 5th version
const len = Math.min(a1.length, b1.length);
// 3. Look through each version number and compare.
for (let i = 0; i < len; i++) {
const a2 = +a1[ i ] || 0;
const b2 = +b1[ i ] || 0;
if (a2 !== b2) {
return a2 > b2 ? 1 : -1;
}
}
// 4. We hit this if the all checked versions so far are equal
//
return b1.length - a1.length;
};

19
web/app/_components/ActiveModelTable/index.tsx Normal file
View File

@ -0,0 +1,19 @@
import { useAtomValue } from "jotai";
import React, { Fragment } from "react";
import ModelTable from "../ModelTable";
import { currentProductAtom } from "@/_helpers/atoms/Model.atom";
const ActiveModelTable: React.FC = () => {
const activeModel = useAtomValue(currentProductAtom);
if (!activeModel) return null;
return (
<Fragment>
<h3 className="text-xl leading-[25px] mb-[13px]">Active Model(s)</h3>
<ModelTable models={[activeModel]} />
</Fragment>
);
};
export default ActiveModelTable;

5
web/app/_components/AvailableModelCard/index.tsx
View File

@ -2,9 +2,8 @@ import { Product } from "@/_models/Product";
import DownloadModelContent from "../DownloadModelContent";
import ModelDownloadButton from "../ModelDownloadButton";
import ModelDownloadingButton from "../ModelDownloadingButton";
import ViewModelDetailButton from "../ViewModelDetailButton";
import { useAtomValue } from "jotai";
import { modelDownloadStateAtom } from "@/_helpers/JotaiWrapper";
import { modelDownloadStateAtom } from "@/_helpers/atoms/DownloadState.atom";
type Props = {
product: Product;
@ -36,8 +35,6 @@ const AvailableModelCard: React.FC<Props> = ({
}
}
const handleViewDetails = () => {};
const downloadButton = isDownloading ? (
<div className="w-1/5 flex items-start justify-end">
<ModelDownloadingButton total={total} value={transferred} />

2
web/app/_components/BasicPromptAccessories/index.tsx
View File

@ -1,9 +1,9 @@
"use client";
import { showingAdvancedPromptAtom } from "@/_helpers/JotaiWrapper";
import { useSetAtom } from "jotai";
import SecondaryButton from "../SecondaryButton";
import SendButton from "../SendButton";
import { showingAdvancedPromptAtom } from "@/_helpers/atoms/Modal.atom";
const BasicPromptAccessories: React.FC = () => {
const setShowingAdvancedPrompt = useSetAtom(showingAdvancedPromptAtom);

2
web/app/_components/BasicPromptButton/index.tsx
View File

@ -1,7 +1,7 @@
import React from "react";
import { useSetAtom } from "jotai";
import { ChevronLeftIcon } from "@heroicons/react/24/outline";
import { showingAdvancedPromptAtom } from "@/_helpers/JotaiWrapper";
import { showingAdvancedPromptAtom } from "@/_helpers/atoms/Modal.atom";
const BasicPromptButton: React.FC = () => {
const setShowingAdvancedPrompt = useSetAtom(showingAdvancedPromptAtom);

29
web/app/_components/BasicPromptInput/index.tsx
View File

@ -1,22 +1,45 @@
"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 { useAtom } from "jotai";
import { useAtom, useAtomValue } from "jotai";
import { ChangeEvent } from "react";
const BasicPromptInput: React.FC = () => {
const activeConversationId = useAtomValue(getActiveConvoIdAtom);
const selectedModel = useAtomValue(selectedModelAtom);
const [currentPrompt, setCurrentPrompt] = useAtom(currentPromptAtom);
const { sendChatMessage } = useSendChatMessage();
const { requestCreateConvo } = useCreateConversation();
const handleMessageChange = (event: any) => {
const { initModel } = useInitModel();
const handleMessageChange = (event: ChangeEvent<HTMLTextAreaElement>) => {
setCurrentPrompt(event.target.value);
};
const handleKeyDown = (event: any) => {
const handleKeyDown = async (
event: React.KeyboardEvent<HTMLTextAreaElement>
) => {
if (event.key === "Enter") {
if (!event.shiftKey) {
if (activeConversationId) {
event.preventDefault();
sendChatMessage();
} else {
if (!selectedModel) {
console.log("No model selected");
return;
}
await requestCreateConvo(selectedModel);
await initModel(selectedModel);
sendChatMessage();
}
}
}
};

8
web/app/_components/ChatBody/index.tsx
View File

@ -4,14 +4,12 @@ import React, { useCallback, useRef, useState } from "react";
import ChatItem from "../ChatItem";
import { ChatMessage } from "@/_models/ChatMessage";
import useChatMessages from "@/_hooks/useChatMessages";
import {
chatMessages,
getActiveConvoIdAtom,
showingTyping,
} from "@/_helpers/JotaiWrapper";
import { showingTyping } from "@/_helpers/JotaiWrapper";
import { useAtomValue } from "jotai";
import { selectAtom } from "jotai/utils";
import LoadingIndicator from "../LoadingIndicator";
import { getActiveConvoIdAtom } from "@/_helpers/atoms/Conversation.atom";
import { chatMessages } from "@/_helpers/atoms/ChatMessage.atom";
const ChatBody: React.FC = () => {
const activeConversationId = useAtomValue(getActiveConvoIdAtom) ?? "";

2
web/app/_components/ChatBody/renderChatMessage.tsx
View File

@ -4,7 +4,7 @@ import SimpleTextMessage from "../SimpleTextMessage";
import { ChatMessage, MessageType } from "@/_models/ChatMessage";
import StreamTextMessage from "../StreamTextMessage";
import { useAtomValue } from "jotai";
import { currentStreamingMessageAtom } from "@/_helpers/JotaiWrapper";
import { currentStreamingMessageAtom } from "@/_helpers/atoms/ChatMessage.atom";
export default function renderChatMessage({
id,

14
web/app/_components/ChatContainer/index.tsx
View File

@ -1,11 +1,16 @@
"use client";
import { useAtomValue } from "jotai";
import { MainViewState, getMainViewStateAtom } from "@/_helpers/JotaiWrapper";
import { ReactNode } from "react";
import ModelManagement from "../ModelManagement";
import Welcome from "../WelcomeContainer";
import { Preferences } from "../Preferences";
import MyModelContainer from "../MyModelContainer";
import ExploreModelContainer from "../ExploreModelContainer";
import {
MainViewState,
getMainViewStateAtom,
} from "@/_helpers/atoms/MainView.atom";
import EmptyChatContainer from "../EmptyChatContainer";
type Props = {
children: ReactNode;
@ -15,12 +20,15 @@ export default function ChatContainer({ children }: Props) {
const viewState = useAtomValue(getMainViewStateAtom);
switch (viewState) {
case MainViewState.ConversationEmptyModel:
return <EmptyChatContainer />
case MainViewState.ExploreModel:
return <ModelManagement />;
return <ExploreModelContainer />;
case MainViewState.Setting:
return <Preferences />;
case MainViewState.ResourceMonitor:
case MainViewState.MyModel:
return <MyModelContainer />;
case MainViewState.Welcome:
return <Welcome />;
default:

2
web/app/_components/CompactLogo/index.tsx
View File

@ -1,7 +1,7 @@
import React from "react";
import JanImage from "../JanImage";
import { setActiveConvoIdAtom } from "@/_helpers/JotaiWrapper";
import { useSetAtom } from "jotai";
import { setActiveConvoIdAtom } from "@/_helpers/atoms/Conversation.atom";
const CompactLogo: React.FC = () => {
const setActiveConvoId = useSetAtom(setActiveConvoIdAtom);

2
web/app/_components/ConfirmDeleteConversationModal/index.tsx
View File

@ -1,4 +1,4 @@
import { showConfirmDeleteConversationModalAtom } from "@/_helpers/JotaiWrapper";
import { showConfirmDeleteConversationModalAtom } from "@/_helpers/atoms/Modal.atom";
import useDeleteConversation from "@/_hooks/useDeleteConversation";
import { Dialog, Transition } from "@headlessui/react";
import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";

10
web/app/_components/ConfirmDeleteModelModal/index.tsx
View File

@ -1,17 +1,13 @@
import React, { Fragment } from "react";
import { Dialog, Transition } from "@headlessui/react";
import { QuestionMarkCircleIcon } from "@heroicons/react/24/outline";
import { showConfirmDeleteModalAtom } from "@/_helpers/JotaiWrapper";
import { useAtom } from "jotai";
import useSignOut from "@/_hooks/useSignOut";
import { showConfirmDeleteModalAtom } from "@/_helpers/atoms/Modal.atom";
const ConfirmDeleteModelModal: React.FC = () => {
const [show, setShow] = useAtom(showConfirmDeleteModalAtom);
const { signOut } = useSignOut();
const onLogOutClick = () => {
signOut().then(() => setShow(false));
};
const onConfirmDelete = () => {};
return (
<Transition.Root show={show} as={Fragment}>
@ -65,7 +61,7 @@ const ConfirmDeleteModelModal: React.FC = () => {
<button
type="button"
className="inline-flex w-full justify-center rounded-md bg-red-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-red-500 sm:ml-3 sm:w-auto"
onClick={onLogOutClick}
onClick={onConfirmDelete}
>
Log out
</button>

2
web/app/_components/ConfirmSignOutModal/index.tsx
View File

@ -1,9 +1,9 @@
import React, { Fragment } from "react";
import { Dialog, Transition } from "@headlessui/react";
import { QuestionMarkCircleIcon } from "@heroicons/react/24/outline";
import { showConfirmSignOutModalAtom } from "@/_helpers/JotaiWrapper";
import { useAtom } from "jotai";
import useSignOut from "@/_hooks/useSignOut";
import { showConfirmSignOutModalAtom } from "@/_helpers/atoms/Modal.atom";
const ConfirmSignOutModal: React.FC = () => {
const [show, setShow] = useAtom(showConfirmSignOutModalAtom);

11
web/app/_components/DownloadedModelCard/index.tsx
View File

@ -1,8 +1,5 @@
import { Product } from "@/_models/Product";
import DownloadModelContent from "../DownloadModelContent";
import ViewModelDetailButton from "../ViewModelDetailButton";
import { executeSerial } from "@/_services/pluginService";
import { InfereceService } from "../../../shared/coreService";
type Props = {
product: Product;
@ -17,11 +14,7 @@ const DownloadedModelCard: React.FC<Props> = ({
isRecommend,
required,
onDeleteClick,
}) => {
const handleViewDetails = () => {};
return (
}) => (
<div className="border rounded-lg border-gray-200">
<div className="flex justify-between py-4 px-3 gap-[10px]">
<DownloadModelContent
@ -36,9 +29,7 @@ const DownloadedModelCard: React.FC<Props> = ({
<button onClick={() => onDeleteClick?.(product)}>Delete</button>
</div>
</div>
{/* <ViewModelDetailButton callback={handleViewDetails} /> */}
</div>
);
};
export default DownloadedModelCard;

20
web/app/_components/DownloadedModelTable/index.tsx Normal file
View File

@ -0,0 +1,20 @@
import React, { Fragment } from "react";
import SearchBar from "../SearchBar";
import ModelTable from "../ModelTable";
import { useGetDownloadedModels } from "@/_hooks/useGetDownloadedModels";
const DownloadedModelTable: React.FC = () => {
const { downloadedModels } = useGetDownloadedModels();
return (
<Fragment>
<h3 className="text-xl leading-[25px] mt-[50px]">Downloaded Models</h3>
<div className="py-5 w-[568px]">
<SearchBar />
</div>
<ModelTable models={downloadedModels} />
</Fragment>
);
};
export default DownloadedModelTable;

14
web/app/_components/EmptyChatContainer/index.tsx Normal file
View File

@ -0,0 +1,14 @@
import React from "react";
import SelectModels from "../ModelSelector";
import InputToolbar from "../InputToolbar";
const EmptyChatContainer: React.FC = () => (
<div className="flex flex-col flex-1">
<div className="flex flex-1 items-center justify-center">
<SelectModels />
</div>
<InputToolbar />
</div>
);
export default EmptyChatContainer;

55
web/app/_components/ExploreModelContainer/index.tsx Normal file
View File

@ -0,0 +1,55 @@
import useGetAvailableModels from "@/_hooks/useGetAvailableModels";
import ExploreModelItem from "../ExploreModelItem";
import HeaderTitle from "../HeaderTitle";
import SearchBar from "../SearchBar";
import SimpleCheckbox from "../SimpleCheckbox";
import SimpleTag, { TagType } from "../SimpleTag";
const tags = [
"Roleplay",
"Llama",
"Story",
"Casual",
"Professional",
"CodeLlama",
"Coding",
];
const checkboxs = ["GGUF", "TensorRT", "Meow", "JigglyPuff"];
const ExploreModelContainer: React.FC = () => {
const { allAvailableModels } = useGetAvailableModels();
return (
<div className="flex flex-col w-full h-full pl-[63px] pr-[89px] pt-[60px] overflow-y-auto">
<HeaderTitle title="Explore Models" />
<SearchBar placeholder="Search or HuggingFace URL" />
<div className="flex gap-x-14 mt-[38px]">
<div className="flex-1 flex-shrink-0">
<h2 className="font-semibold text-xs mb-[15px]">Tags</h2>
<SearchBar placeholder="Filter by tags" />
<div className="flex flex-wrap gap-[9px] mt-[14px]">
{tags.map((item) => (
<SimpleTag key={item} title={item} type={item as TagType} />
))}
</div>
<hr className="my-10" />
<fieldset>
{checkboxs.map((item) => (
<SimpleCheckbox key={item} name={item} />
))}
</fieldset>
</div>
<div className="flex-[3_3_0%]">
<h2 className="font-semibold text-xs mb-[18px]">Results</h2>
<div className="flex flex-col gap-[31px]">
{allAvailableModels.map((item) => (
<ExploreModelItem key={item.id} model={item} />
))}
</div>
</div>
</div>
</div>
);
};
export default ExploreModelContainer;

101
web/app/_components/ExploreModelItem/index.tsx Normal file
View File

@ -0,0 +1,101 @@
"use client";
import ExploreModelItemHeader from "../ExploreModelItemHeader";
import ModelVersionList from "../ModelVersionList";
import { useMemo, useState } from "react";
import { Product } from "@/_models/Product";
import SimpleTag, { TagType } from "../SimpleTag";
import { displayDate } from "@/_utils/datetime";
import useDownloadModel from "@/_hooks/useDownloadModel";
import { atom, useAtomValue } from "jotai";
import { modelDownloadStateAtom } from "@/_helpers/atoms/DownloadState.atom";
type Props = {
model: Product;
};
const ExploreModelItem: React.FC<Props> = ({ model }) => {
const downloadAtom = useMemo(
() => atom((get) => get(modelDownloadStateAtom)[model.fileName ?? ""]),
[model.fileName ?? ""]
);
const downloadState = useAtomValue(downloadAtom);
const { downloadModel } = useDownloadModel();
const [show, setShow] = useState(false);
return (
<div className="flex flex-col border border-gray-200 rounded-[5px]">
<ExploreModelItemHeader
name={model.name}
status={TagType.Recommended}
total={model.totalSize}
downloadState={downloadState}
onDownloadClick={() => downloadModel(model)}
/>
<div className="flex flex-col px-[26px] py-[22px]">
<div className="flex justify-between">
<div className="flex-1 flex flex-col gap-8">
<div className="flex flex-col gap-1">
<div className="text-sm font-medium text-gray-500">
Model Format
</div>
<div className="px-[10px] py-0.5 bg-gray-100 text-xs text-gray-800 w-fit">
GGUF
</div>
</div>
<div className="flex flex-col">
<div className="text-sm font-medium text-gray-500">
Hardware Compatibility
</div>
<div className="flex gap-2">
<SimpleTag
clickable={false}
title={TagType.Compatible}
type={TagType.Compatible}
/>
</div>
</div>
</div>
<div className="flex-1 flex flex-col gap-8">
<div>
<div className="text-sm font-medium text-gray-500">
Release Date
</div>
<div className="text-sm font-normal text-gray-900">
{displayDate(model.releaseDate)}
</div>
</div>
<div className="flex flex-col gap-2">
<div className="text-sm font-medium text-gray-500">
Expected Performance
</div>
<SimpleTag
title={TagType.Medium}
type={TagType.Medium}
clickable={false}
/>
</div>
</div>
</div>
<div className="flex flex-col gap-1 mt-[26px]">
<span className="text-sm font-medium text-gray-500">About</span>
<span className="text-sm font-normal text-gray-500">
{model.longDescription}
</span>
</div>
<div className="flex flex-col">
<span className="text-sm font-medium text-gray-500">Tags</span>
</div>
</div>
{show && <ModelVersionList />}
<button
onClick={() => setShow(!show)}
className="bg-[#FBFBFB] text-gray-500 text-sm text-left py-2 px-4 border-t border-gray-200"
>
{!show ? "+ Show Available Versions" : "- Collapse"}
</button>
</div>
);
};
export default ExploreModelItem;

44
web/app/_components/ExploreModelItemHeader/index.tsx Normal file
View File

@ -0,0 +1,44 @@
import SimpleTag, { TagType } from "../SimpleTag";
import PrimaryButton from "../PrimaryButton";
import { formatDownloadPercentage, toGigabytes } from "@/_utils/converter";
import { DownloadState } from "@/_models/DownloadState";
import SecondaryButton from "../SecondaryButton";
type Props = {
name: string;
total: number;
status: TagType;
downloadState?: DownloadState;
onDownloadClick?: () => void;
};
const ExploreModelItemHeader: React.FC<Props> = ({
name,
status,
total,
downloadState,
onDownloadClick,
}) => (
<div className="flex items-center justify-between p-4 border-b border-gray-200">
<div className="flex items-center gap-2">
<span>{name}</span>
<SimpleTag title={status} type={status} clickable={false} />
</div>
{downloadState != null ? (
<SecondaryButton
disabled
title={`Downloading (${formatDownloadPercentage(
downloadState.percent
)})`}
onClick={() => {}}
/>
) : (
<PrimaryButton
title={total ? `Download (${toGigabytes(total)})` : "Download"}
onClick={() => onDownloadClick?.()}
/>
)}
</div>
);
export default ExploreModelItemHeader;

2
web/app/_components/HamburgerButton/index.tsx
View File

@ -1,6 +1,6 @@
"use client";
import { showingMobilePaneAtom } from "@/_helpers/JotaiWrapper";
import { showingMobilePaneAtom } from "@/_helpers/atoms/Modal.atom";
import { Bars3Icon } from "@heroicons/react/24/outline";
import { useSetAtom } from "jotai";
import React from "react";

39
web/app/_components/HistoryItem/index.tsx
View File

@ -1,22 +1,20 @@
import React from "react";
import JanImage from "../JanImage";
import {
MainViewState,
activeModel,
conversationStatesAtom,
currentProductAtom,
getActiveConvoIdAtom,
setActiveConvoIdAtom,
setMainViewStateAtom,
} from "@/_helpers/JotaiWrapper";
import { useAtomValue, useSetAtom } from "jotai";
import Image from "next/image";
import { Conversation } from "@/_models/Conversation";
import { DataService, InfereceService } from "../../../shared/coreService";
import { DataService } from "../../../shared/coreService";
import { executeSerial } from "../../../../electron/core/plugin-manager/execution/extension-manager";
import {
execute,
executeSerial,
} from "../../../../electron/core/plugin-manager/execution/extension-manager";
conversationStatesAtom,
getActiveConvoIdAtom,
setActiveConvoIdAtom,
} from "@/_helpers/atoms/Conversation.atom";
import {
setMainViewStateAtom,
MainViewState,
} from "@/_helpers/atoms/MainView.atom";
import useInitModel from "@/_hooks/useInitModel";
type Props = {
conversation: Conversation;
@ -36,23 +34,20 @@ const HistoryItem: React.FC<Props> = ({
const activeConvoId = useAtomValue(getActiveConvoIdAtom);
const setActiveConvoId = useSetAtom(setActiveConvoIdAtom);
const isSelected = activeConvoId === conversation.id;
const setActiveModel = useSetAtom(activeModel);
const setActiveProduct = useSetAtom(currentProductAtom);
const { initModel } = useInitModel();
const onClick = async () => {
const convoModel = await executeSerial(
const model = await executeSerial(
DataService.GET_MODEL_BY_ID,
conversation.model_id
);
if (!convoModel) {
if (!model) {
alert(
`Model ${conversation.model_id} not found! Please re-download the model first.`
);
} else {
setActiveProduct(convoModel)
executeSerial(InfereceService.INIT_MODEL, convoModel)
.then(() => console.info(`Init model success`))
.catch((err) => console.log(`Init model error ${err}`));
setActiveModel(convoModel.name);
initModel(model);
}
if (activeConvoId !== conversation.id) {
setMainViewState(MainViewState.Conversation);

3
web/app/_components/HistoryList/index.tsx
View File

@ -2,9 +2,10 @@ import HistoryItem from "../HistoryItem";
import { useEffect, useState } from "react";
import ExpandableHeader from "../ExpandableHeader";
import { useAtomValue } from "jotai";
import { searchAtom, userConversationsAtom } from "@/_helpers/JotaiWrapper";
import { searchAtom } from "@/_helpers/JotaiWrapper";
import useGetUserConversations from "@/_hooks/useGetUserConversations";
import SidebarEmptyHistory from "../SidebarEmptyHistory";
import { userConversationsAtom } from "@/_helpers/atoms/Conversation.atom";
const HistoryList: React.FC = () => {
const conversations = useAtomValue(userConversationsAtom);

2
web/app/_components/InputToolbar/index.tsx
View File

@ -2,8 +2,8 @@
import BasicPromptInput from "../BasicPromptInput";
import BasicPromptAccessories from "../BasicPromptAccessories";
import { showingAdvancedPromptAtom } from "@/_helpers/JotaiWrapper";
import { useAtomValue } from "jotai";
import { showingAdvancedPromptAtom } from "@/_helpers/atoms/Modal.atom";
const InputToolbar: React.FC = () => {
const showingAdvancedPrompt = useAtomValue(showingAdvancedPromptAtom);

2
web/app/_components/JanLogo/index.tsx
View File

@ -1,4 +1,4 @@
import { setActiveConvoIdAtom } from "@/_helpers/JotaiWrapper";
import { setActiveConvoIdAtom } from "@/_helpers/atoms/Conversation.atom";
import { useSetAtom } from "jotai";
import Image from "next/image";
import React from "react";

2
web/app/_components/LeftContainer/index.tsx
View File

@ -3,10 +3,12 @@ import SidebarFooter from "../SidebarFooter";
import SidebarHeader from "../SidebarHeader";
import SidebarMenu from "../SidebarMenu";
import HistoryList from "../HistoryList";
import NewChatButton from "../NewChatButton";
const LeftContainer: React.FC = () => (
<div className="w-[323px] flex-shrink-0 p-3 h-screen border-r border-gray-200 flex flex-col">
<SidebarHeader />
<NewChatButton />
<HistoryList />
<SidebarMenu />
<SidebarFooter />

2
web/app/_components/MenuHeader/index.tsx
View File

@ -3,7 +3,7 @@ import { Popover, Transition } from "@headlessui/react";
import { Fragment } from "react";
// import useGetCurrentUser from "@/_hooks/useGetCurrentUser";
import { useSetAtom } from "jotai";
import { showConfirmSignOutModalAtom } from "@/_helpers/JotaiWrapper";
import { showConfirmSignOutModalAtom } from "@/_helpers/atoms/Modal.atom";
export const MenuHeader: React.FC = () => {
const setShowConfirmSignOutModal = useSetAtom(showConfirmSignOutModalAtom);

2
web/app/_components/MobileMenuPane/index.tsx
View File

@ -2,8 +2,8 @@ import React, { useRef } from "react";
import { Dialog } from "@headlessui/react";
import { XMarkIcon } from "@heroicons/react/24/outline";
import Image from "next/image";
import { showingMobilePaneAtom } from "@/_helpers/JotaiWrapper";
import { useAtom } from "jotai";
import { showingMobilePaneAtom } from "@/_helpers/atoms/Modal.atom";
const MobileMenuPane: React.FC = () => {
const [show, setShow] = useAtom(showingMobilePaneAtom);

46
web/app/_components/ModelActionButton/index.tsx Normal file
View File

@ -0,0 +1,46 @@
import React from "react";
import PrimaryButton from "../PrimaryButton";
export enum ModelActionType {
Start = "Start",
Stop = "Stop",
}
type ModelActionStyle = {
title: string;
backgroundColor: string;
textColor: string;
};
const modelActionMapper: Record<ModelActionType, ModelActionStyle> = {
[ModelActionType.Start]: {
title: "Start",
backgroundColor: "bg-blue-500 hover:bg-blue-600",
textColor: "text-white",
},
[ModelActionType.Stop]: {
title: "Stop",
backgroundColor: "bg-red-500 hover:bg-red-600",
textColor: "text-white",
},
};
type Props = {
type: ModelActionType;
onActionClick: (type: ModelActionType) => void;
};
const ModelActionButton: React.FC<Props> = ({ type, onActionClick }) => {
const styles = modelActionMapper[type];
const onClick = () => {
onActionClick(type);
};
return (
<td className="whitespace-nowrap px-6 py-4 text-sm">
<PrimaryButton title={styles.title} onClick={onClick} />
</td>
);
};
export default ModelActionButton;

35
web/app/_components/ModelActionMenu/index.tsx Normal file
View File

@ -0,0 +1,35 @@
import { Menu, Transition } from "@headlessui/react";
import { EllipsisVerticalIcon } from "@heroicons/react/20/solid";
import { Fragment } from "react";
type Props = {
onDeleteClick: () => void;
};
const ModelActionMenu: React.FC<Props> = ({ onDeleteClick }) => {
return (
<Menu as="div" className="relative flex-none">
<Menu.Button className="block text-gray-500 hover:text-gray-900">
<span className="sr-only">Open options</span>
<EllipsisVerticalIcon className="h-5 w-5" aria-hidden="true" />
</Menu.Button>
<Transition
as={Fragment}
enter="transition ease-out duration-100"
enterFrom="transform opacity-0 scale-95"
enterTo="transform opacity-100 scale-100"
leave="transition ease-in duration-75"
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95"
>
<Menu.Items className="absolute right-0 z-50 mt-2 w-32 origin-top-right rounded-md bg-white py-2 shadow-lg ring-1 ring-gray-900/5 focus:outline-none">
<Menu.Item>
<button onClick={onDeleteClick}>Delete</button>
</Menu.Item>
</Menu.Items>
</Transition>
</Menu>
);
};
export default ModelActionMenu;

14
web/app/_components/ModelDownloadingButton/index.tsx
View File

@ -1,3 +1,5 @@
import { toGigabytes } from "@/_utils/converter";
type Props = {
total: number;
value: number;
@ -18,16 +20,4 @@ const ModelDownloadingButton: React.FC<Props> = ({ total, value }) => {
);
};
const toGigabytes = (input: number) => {
if (input > 1024 ** 3) {
return (input / 1000 ** 3).toFixed(2) + "GB";
} else if (input > 1024 ** 2) {
return (input / 1000 ** 2).toFixed(2) + "MB";
} else if (input > 1024) {
return (input / 1000).toFixed(2) + "KB";
} else {
return input + "B";
}
};
export default ModelDownloadingButton;

88
web/app/_components/ModelListContainer/index.tsx
View File

@ -1,92 +1,36 @@
"use client";
import { useEffect, useState } from "react";
import { execute, executeSerial } from "@/_services/pluginService";
import {
DataService,
ModelManagementService,
} from "../../../shared/coreService";
import { useAtomValue } from "jotai";
import {
modelDownloadStateAtom,
searchingModelText,
} from "@/_helpers/JotaiWrapper";
import { searchingModelText } from "@/_helpers/JotaiWrapper";
import { Product } from "@/_models/Product";
import DownloadedModelCard from "../DownloadedModelCard";
import AvailableModelCard from "../AvailableModelCard";
import useDeleteModel from "@/_hooks/useDeleteModel";
import useGetAvailableModels from "@/_hooks/useGetAvailableModels";
import useDownloadModel from "@/_hooks/useDownloadModel";
const ModelListContainer: React.FC = () => {
const [downloadedModels, setDownloadedModels] = useState<Product[]>([]);
const [availableModels, setAvailableModels] = useState<Product[]>([]);
const downloadState = useAtomValue(modelDownloadStateAtom);
const searchText = useAtomValue(searchingModelText);
const { deleteModel } = useDeleteModel();
const { downloadModel } = useDownloadModel();
useEffect(() => {
const getDownloadedModels = async () => {
const avails = await executeSerial(
ModelManagementService.GET_AVAILABLE_MODELS
);
const downloaded: Product[] = await executeSerial(
ModelManagementService.GET_DOWNLOADED_MODELS
);
const downloadedSucessfullyModels: Product[] = [];
const availableOrDownloadingModels: Product[] = avails;
downloaded.forEach((item) => {
if (item.fileName && downloadState[item.fileName] == null) {
downloadedSucessfullyModels.push(item);
} else {
availableOrDownloadingModels.push(item);
}
});
setAvailableModels(availableOrDownloadingModels);
setDownloadedModels(downloadedSucessfullyModels);
};
getDownloadedModels();
}, [downloadState]);
const {
availableModels,
downloadedModels,
getAvailableModelExceptDownloaded,
} = useGetAvailableModels();
const onDeleteClick = async (product: Product) => {
execute(DataService.DELETE_DOWNLOAD_MODEL, product.id);
await executeSerial(ModelManagementService.DELETE_MODEL, product.fileName);
const getDownloadedModels = async () => {
const avails = await executeSerial(
ModelManagementService.GET_AVAILABLE_MODELS
);
const downloaded: Product[] = await executeSerial(
ModelManagementService.GET_DOWNLOADED_MODELS
);
const downloadedSucessfullyModels: Product[] = [];
const availableOrDownloadingModels: Product[] = avails;
downloaded.forEach((item) => {
if (item.fileName && downloadState[item.fileName] == null) {
downloadedSucessfullyModels.push(item);
} else {
availableOrDownloadingModels.push(item);
}
});
setAvailableModels(availableOrDownloadingModels);
setDownloadedModels(downloadedSucessfullyModels);
};
getDownloadedModels();
await deleteModel(product);
await getAvailableModelExceptDownloaded();
};
const onDownloadClick = async (product: Product) => {
await executeSerial(DataService.STORE_MODEL, product);
await executeSerial(ModelManagementService.DOWNLOAD_MODEL, {
downloadUrl: product.downloadUrl,
fileName: product.fileName,
});
const onDownloadClick = async (model: Product) => {
await downloadModel(model);
};
return (
<div className="flex flex-col gap-5">
<div className="flex flex-col w-full h-full pl-[63px] pr-[89px] pt-[60px] overflow-y-auto">
<div className="pb-5 flex flex-col gap-2">
<Title title="Downloaded models" />
{downloadedModels

6
web/app/_components/ModelMenu/index.tsx
View File

@ -1,12 +1,10 @@
"use client";
import { useAtomValue, useSetAtom } from "jotai";
import {
currentProductAtom,
showConfirmDeleteConversationModalAtom,
} from "@/_helpers/JotaiWrapper";
import { PlusIcon, TrashIcon } from "@heroicons/react/24/outline";
import useCreateConversation from "@/_hooks/useCreateConversation";
import { showConfirmDeleteConversationModalAtom } from "@/_helpers/atoms/Modal.atom";
import { currentProductAtom } from "@/_helpers/atoms/Model.atom";
const ModelMenu: React.FC = () => {
const currentProduct = useAtomValue(currentProductAtom);

78
web/app/_components/ModelRow/index.tsx Normal file
View File

@ -0,0 +1,78 @@
import React from "react";
import { Product } from "@/_models/Product";
import Image from "next/image";
import { ModelStatus, ModelStatusComponent } from "../ModelStatusComponent";
import ModelActionMenu from "../ModelActionMenu";
import { useAtomValue } from "jotai";
import ModelActionButton, { ModelActionType } from "../ModelActionButton";
import useStartStopModel from "@/_hooks/useStartStopModel";
import useDeleteModel from "@/_hooks/useDeleteModel";
import { currentProductAtom } from "@/_helpers/atoms/Model.atom";
type Props = {
model: Product;
};
const ModelRow: React.FC<Props> = ({ model }) => {
const { startModel } = useStartStopModel();
const activeModel = useAtomValue(currentProductAtom);
const { deleteModel } = useDeleteModel();
let status = ModelStatus.Installed;
if (activeModel && activeModel.id === model.id) {
status = ModelStatus.Active;
}
let actionButtonType = ModelActionType.Start;
if (activeModel && activeModel.id === model.id) {
actionButtonType = ModelActionType.Stop;
}
const onModelActionClick = (action: ModelActionType) => {
if (action === ModelActionType.Start) {
startModel(model.id);
}
};
const onDeleteClick = () => {
deleteModel(model);
};
return (
<tr
className="border-b border-gray-200 last:border-b-0 last:rounded-lg"
key={model.id}
>
<td className="flex flex-col whitespace-nowrap px-6 py-4 text-sm font-medium text-gray-900">
{model.name}
<span className="text-gray-500 font-normal">{model.version}</span>
</td>
<td className="whitespace-nowrap px-6 py-4 text-sm text-gray-500">
<div className="flex flex-col justify-start">
<span>{model.format}</span>
{model.accelerated && (
<span className="flex items-center text-gray-500 text-sm font-normal gap-0.5">
<Image src={"/icons/flash.svg"} width={20} height={20} alt="" />
GPU Accelerated
</span>
)}
</div>
</td>
<td className="whitespace-nowrap px-6 py-4 text-sm text-gray-500">
{model.totalSize}
</td>
<td className="whitespace-nowrap px-6 py-4 text-sm text-gray-500">
<ModelStatusComponent status={status} />
</td>
<ModelActionButton
type={actionButtonType}
onActionClick={onModelActionClick}
/>
<td className="relative whitespace-nowrap px-6 py-4 w-fit text-right text-sm font-medium">
<ModelActionMenu onDeleteClick={onDeleteClick} />
</td>
</tr>
);
};
export default ModelRow;

118
web/app/_components/ModelSelector/index.tsx Normal file
View File

@ -0,0 +1,118 @@
import { Fragment, useEffect } from "react";
import { Listbox, Transition } from "@headlessui/react";
import { CheckIcon, ChevronUpDownIcon } from "@heroicons/react/20/solid";
import { useGetDownloadedModels } from "@/_hooks/useGetDownloadedModels";
import { Product } from "@/_models/Product";
import { useAtom } from "jotai";
import { selectedModelAtom } from "@/_helpers/atoms/Model.atom";
function classNames(...classes: any) {
return classes.filter(Boolean).join(" ");
}
const SelectModels: React.FC = () => {
const { downloadedModels } = useGetDownloadedModels();
const [selectedModel, setSelectedModel] = useAtom(selectedModelAtom);
useEffect(() => {
if (downloadedModels && downloadedModels.length > 0) {
onModelSelected(downloadedModels[0]);
}
}, [downloadedModels]);
const onModelSelected = (model: Product) => {
setSelectedModel(model);
};
if (!selectedModel) {
return <div>You have not downloaded any model!</div>;
}
return (
<Listbox value={selectedModel} onChange={onModelSelected}>
{({ open }) => (
<div className="w-[461px]">
<Listbox.Label className="block text-sm font-medium leading-6 text-gray-900">
Select a Model:
</Listbox.Label>
<div className="relative mt-[19px]">
<Listbox.Button className="relative w-full cursor-default rounded-md bg-white py-1.5 pl-3 pr-10 text-left text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500 sm:text-sm sm:leading-6">
<span className="flex items-center">
<img
src={selectedModel.avatarUrl}
alt=""
className="h-5 w-5 flex-shrink-0 rounded-full"
/>
<span className="ml-3 block truncate">
{selectedModel.name}
</span>
</span>
<span className="pointer-events-none absolute inset-y-0 right-0 ml-3 flex items-center pr-2">
<ChevronUpDownIcon
className="h-5 w-5 text-gray-400"
aria-hidden="true"
/>
</span>
</Listbox.Button>
<Transition
show={open}
as={Fragment}
leave="transition ease-in duration-100"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<Listbox.Options className="absolute z-10 mt-1 max-h-[188px] w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
{downloadedModels.map((model) => (
<Listbox.Option
key={model.id}
className={({ active }) =>
classNames(
active ? "bg-indigo-600 text-white" : "text-gray-900",
"relative cursor-default select-none py-2 pl-3 pr-9"
)
}
value={model}
>
{({ selected, active }) => (
<>
<div className="flex items-center">
<img
src={model.avatarUrl}
alt=""
className="h-5 w-5 flex-shrink-0 rounded-full"
/>
<span
className={classNames(
selected ? "font-semibold" : "font-normal",
"ml-3 block truncate"
)}
>
{model.name}
</span>
</div>
{selected ? (
<span
className={classNames(
active ? "text-white" : "text-indigo-600",
"absolute inset-y-0 right-0 flex items-center pr-4"
)}
>
<CheckIcon className="h-5 w-5" aria-hidden="true" />
</span>
) : null}
</>
)}
</Listbox.Option>
))}
</Listbox.Options>
</Transition>
</div>
</div>
)}
</Listbox>
);
};
export default SelectModels;

46
web/app/_components/ModelStatusComponent/index.tsx Normal file
View File

@ -0,0 +1,46 @@
import React from "react";
export type ModelStatusType = {
title: string;
textColor: string;
backgroundColor: string;
};
export enum ModelStatus {
Installed,
Active,
RunningInNitro,
}
export const ModelStatusMapper: Record<ModelStatus, ModelStatusType> = {
[ModelStatus.Installed]: {
title: "Installed",
textColor: "text-black",
backgroundColor: "bg-gray-100",
},
[ModelStatus.Active]: {
title: "Active",
textColor: "text-black",
backgroundColor: "bg-green-100",
},
[ModelStatus.RunningInNitro]: {
title: "Running in Nitro",
textColor: "text-black",
backgroundColor: "bg-green-100",
},
};
type Props = {
status: ModelStatus;
};
export const ModelStatusComponent: React.FC<Props> = ({ status }) => {
const statusType = ModelStatusMapper[status];
return (
<div
className={`rounded-[10px] py-0.5 px-[10px] w-fit text-xs font-medium ${statusType.backgroundColor}`}
>
{statusType.title}
</div>
);
};

34
web/app/_components/ModelTable/index.tsx Normal file
View File

@ -0,0 +1,34 @@
import React from "react";
import { Product } from "@/_models/Product";
import ModelRow from "../ModelRow";
import ModelTableHeader from "../ModelTableHeader";
type Props = {
models: Product[];
};
const tableHeaders = ["MODEL", "FORMAT", "SIZE", "STATUS", "ACTIONS"];
const ModelTable: React.FC<Props> = ({ models }) => (
<div className="flow-root inline-block border rounded-lg border-gray-200 min-w-full align-middle shadow-lg">
<table className="min-w-full">
<thead className="bg-gray-50 border-b border-gray-200">
<tr className="rounded-t-lg">
{tableHeaders.map((item) => (
<ModelTableHeader key={item} title={item} />
))}
<th scope="col" className="relative px-6 py-3 w-fit">
<span className="sr-only">Edit</span>
</th>
</tr>
</thead>
<tbody>
{models.map((model) => (
<ModelRow key={model.id} model={model} />
))}
</tbody>
</table>
</div>
);
export default React.memo(ModelTable);

16
web/app/_components/ModelTableHeader/index.tsx Normal file
View File

@ -0,0 +1,16 @@
import React from "react";
type Props = {
title: string;
};
const ModelTableHeader: React.FC<Props> = ({ title }) => (
<th
scope="col"
className="px-6 py-3 text-left first:rounded-tl-lg last:rounded-tr-lg text-xs font-medium uppercase tracking-wide text-gray-500"
>
{title}
</th>
);
export default React.memo(ModelTableHeader);

25
web/app/_components/ModelVersionItem/index.tsx Normal file
View File

@ -0,0 +1,25 @@
import React from "react";
import { toGigabytes } from "@/_utils/converter";
import Image from "next/image";
type Props = {
title: string;
totalSizeInByte: number;
};
const ModelVersionItem: React.FC<Props> = ({ title, totalSizeInByte }) => (
<div className="flex justify-between items-center gap-4 pl-[13px] pt-[13px] pr-[17px] pb-3 border-t border-gray-200 first:border-t-0">
<div className="flex items-center gap-4">
<Image src={"/icons/app_icon.svg"} width={14} height={20} alt="" />
<span className="font-sm text-gray-900">{title}</span>
</div>
<div className="flex items-center gap-4">
<div className="px-[10px] py-0.5 bg-gray-200 text-xs font-medium rounded">
{toGigabytes(totalSizeInByte)}
</div>
<button className="text-indigo-600 text-sm font-medium">Download</button>
</div>
</div>
);
export default ModelVersionItem;

38
web/app/_components/ModelVersionList/index.tsx Normal file
View File

@ -0,0 +1,38 @@
import React from "react";
import ModelVersionItem from "../ModelVersionItem";
const data = [
{
name: "Q4_K_M.gguf",
total: 5600,
},
{
name: "Q4_K_M.gguf",
total: 5600,
},
{
name: "Q4_K_M.gguf",
total: 5600,
},
];
const ModelVersionList: React.FC = () => {
return (
<div className="px-4 py-5 border-t border-gray-200">
<div className="text-sm font-medium text-gray-500">
Available Versions
</div>
<div className="border border-gray-200 rounded-lg overflow-hidden">
{data.map((item, index) => (
<ModelVersionItem
key={index}
title={item.name}
totalSizeInByte={item.total}
/>
))}
</div>
</div>
);
};
export default ModelVersionList;

32
web/app/_components/MonitorBar/index.tsx
View File

@ -1,42 +1,22 @@
import ProgressBar from "../ProgressBar";
import SystemItem from "../SystemItem";
import { useAtomValue } from "jotai";
import {
activeModel,
appDownloadProgress,
getSystemBarVisibilityAtom,
} from "@/_helpers/JotaiWrapper";
import { appDownloadProgress } from "@/_helpers/JotaiWrapper";
import { useEffect, useState } from "react";
import { executeSerial } from "../../../../electron/core/plugin-manager/execution/extension-manager";
import { SystemMonitoringService } from "../../../shared/coreService";
import { getSystemBarVisibilityAtom } from "@/_helpers/atoms/SystemBar.atom";
import { currentProductAtom } from "@/_helpers/atoms/Model.atom";
const MonitorBar: React.FC = () => {
const show = useAtomValue(getSystemBarVisibilityAtom);
const progress = useAtomValue(appDownloadProgress);
const modelName = useAtomValue(activeModel);
const activeModel = useAtomValue(currentProductAtom);
const [ram, setRam] = useState<number>(0);
const [gpu, setGPU] = useState<number>(0);
const [cpu, setCPU] = useState<number>(0);
const [version, setVersion] = useState<string>("");
const data = [
{
name: "CPU",
total: 1400,
used: 750,
},
{
name: "Ram",
total: 16000,
used: 4500,
},
{
name: "VRAM",
total: 1400,
used: 1300,
},
];
useEffect(() => {
const getSystemResources = async () => {
const resourceInfor = await executeSerial(
@ -77,8 +57,8 @@ const MonitorBar: React.FC = () => {
<SystemItem name="CPU" value={`${cpu}%`} />
<SystemItem name="Mem" value={`${ram}%`} />
{modelName && modelName.length > 0 && (
<SystemItem name="Active Models" value={"1"} />
{activeModel && (
<SystemItem name={`Active model: ${activeModel.name}`} value={"1"} />
)}
<span className="text-gray-900 text-sm">v{version}</span>
</div>

13
web/app/_components/MyModelContainer/index.tsx Normal file
View File

@ -0,0 +1,13 @@
import HeaderTitle from "../HeaderTitle";
import DownloadedModelTable from "../DownloadedModelTable";
import ActiveModelTable from "../ActiveModelTable";
const MyModelContainer: React.FC = () => (
<div className="flex flex-col w-full h-full pl-[63px] pr-[89px] pt-[60px]">
<HeaderTitle title="My Models" />
<ActiveModelTable />
<DownloadedModelTable />
</div>
);
export default MyModelContainer;

39
web/app/_components/NewChatButton/index.tsx Normal file
View File

@ -0,0 +1,39 @@
"use client";
import React from "react";
import SecondaryButton from "../SecondaryButton";
import { useAtomValue, useSetAtom } from "jotai";
import {
MainViewState,
setMainViewStateAtom,
} from "@/_helpers/atoms/MainView.atom";
import { currentProductAtom } from "@/_helpers/atoms/Model.atom";
import useCreateConversation from "@/_hooks/useCreateConversation";
import useInitModel from "@/_hooks/useInitModel";
import { Product } from "@/_models/Product";
const NewChatButton: React.FC = () => {
const activeModel = useAtomValue(currentProductAtom);
const setMainView = useSetAtom(setMainViewStateAtom);
const { requestCreateConvo } = useCreateConversation();
const { initModel } = useInitModel();
const onClick = () => {
if (!activeModel) {
setMainView(MainViewState.ConversationEmptyModel);
} else {
createConversationAndInitModel(activeModel);
}
};
const createConversationAndInitModel = async (model: Product) => {
await requestCreateConvo(model);
await initModel(model);
};
return (
<SecondaryButton title={"New Chat"} onClick={onClick} className="my-5" />
);
};
export default NewChatButton;

2
web/app/_components/RightContainer/index.tsx
View File

@ -1,11 +1,9 @@
import ChatContainer from "../ChatContainer";
import Header from "../Header";
import MainChat from "../MainChat";
import MonitorBar from "../MonitorBar";
const RightContainer = () => (
<div className="flex flex-col flex-1 h-screen">
<Header />
<ChatContainer>
<MainChat />
</ChatContainer>

12
web/app/_components/SearchBar/index.tsx
View File

@ -2,11 +2,15 @@ import { searchAtom } from "@/_helpers/JotaiWrapper";
import { MagnifyingGlassIcon } from "@heroicons/react/24/outline";
import { useSetAtom } from "jotai";
const SearchBar: React.FC = () => {
const setText = useSetAtom(searchAtom);
type Props = {
placeholder?: string;
};
const SearchBar: React.FC<Props> = ({ placeholder }) => {
const setText = useSetAtom(searchAtom);
let placeholderText = placeholder ? placeholder : "Search (⌘K)";
return (
<div className="relative mx-3 mt-3 flex items-center">
<div className="relative mt-3 flex items-center">
<div className="absolute top-0 left-2 h-full flex items-center">
<MagnifyingGlassIcon
width={16}
@ -19,7 +23,7 @@ const SearchBar: React.FC = () => {
type="text"
name="search"
id="search"
placeholder="Search (⌘K)"
placeholder={placeholderText}
onChange={(e) => setText(e.target.value)}
className="block w-full rounded-md border-0 py-1.5 pl-8 pr-14 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
/>

10
web/app/_components/SecondaryButton/index.tsx
View File

@ -2,14 +2,20 @@ type Props = {
title: string;
onClick: () => void;
disabled?: boolean;
className?: string;
};
const SecondaryButton: React.FC<Props> = ({ title, onClick, disabled }) => (
const SecondaryButton: React.FC<Props> = ({
title,
onClick,
disabled,
className,
}) => (
<button
disabled={disabled}
type="button"
onClick={onClick}
className="rounded-full bg-white px-2.5 py-1 text-xs font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50"
className={`rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 ${className}`}
>
{title}
</button>

6
web/app/_components/SendButton/index.tsx
View File

@ -1,7 +1,5 @@
import {
currentConvoStateAtom,
currentPromptAtom,
} from "@/_helpers/JotaiWrapper";
import { currentPromptAtom } from "@/_helpers/JotaiWrapper";
import { currentConvoStateAtom } from "@/_helpers/atoms/Conversation.atom";
import useSendChatMessage from "@/_hooks/useSendChatMessage";
import { useAtom, useAtomValue } from "jotai";
import Image from "next/image";

24
web/app/_components/SidebarButton/index.tsx
View File

@ -1,24 +0,0 @@
import Image from "next/image";
type Props = {
callback?: () => void;
className?: string;
icon: string;
width: number;
height: number;
title: string;
};
export const SidebarButton: React.FC<Props> = ({
callback,
height,
icon,
className,
width,
title,
}) => (
<button onClick={callback} className={className}>
<Image src={icon} width={width} height={height} alt="" />
<span>{title}</span>
</button>
);

77
web/app/_components/SidebarEmptyHistory/index.tsx
View File

@ -1,28 +1,56 @@
import Image from "next/image";
import { SidebarButton } from "../SidebarButton";
import { executeSerial } from "../../../../electron/core/plugin-manager/execution/extension-manager";
import { DataService } from "../../../shared/coreService";
import useCreateConversation from "@/_hooks/useCreateConversation";
import PrimaryButton from "../PrimaryButton";
import { useAtomValue, useSetAtom } from "jotai";
import { useGetDownloadedModels } from "@/_hooks/useGetDownloadedModels";
import { useEffect, useState } from "react";
import {
MainViewState,
setMainViewStateAtom,
} from "@/_helpers/atoms/MainView.atom";
import { currentProductAtom } from "@/_helpers/atoms/Model.atom";
import useInitModel from "@/_hooks/useInitModel";
import { Product } from "@/_models/Product";
enum ActionButton {
DownloadModel = "Download a Model",
StartChat = "Start a Conversation",
}
const SidebarEmptyHistory: React.FC = () => {
const { downloadedModels } = useGetDownloadedModels();
const activeModel = useAtomValue(currentProductAtom);
const setMainView = useSetAtom(setMainViewStateAtom);
const { requestCreateConvo } = useCreateConversation();
const startChat = async () => {
// Host
if (window && !window.electronAPI) {
// requestCreateConvo(); // TODO: get model id from somewhere
}
// Electron
const downloadedModels = await executeSerial(
DataService.GET_FINISHED_DOWNLOAD_MODELS
);
if (!downloadedModels || downloadedModels?.length === 0) {
alert(
"Seems like there is no model downloaded yet. Please download a model first."
);
const [action, setAction] = useState(ActionButton.DownloadModel);
const { initModel } = useInitModel();
useEffect(() => {
if (downloadedModels.length > 0) {
setAction(ActionButton.StartChat);
} else {
requestCreateConvo(downloadedModels[0]);
setAction(ActionButton.DownloadModel);
}
}, [downloadedModels]);
const onClick = () => {
if (action === ActionButton.DownloadModel) {
setMainView(MainViewState.ExploreModel);
} else {
if (!activeModel) {
setMainView(MainViewState.ConversationEmptyModel);
} else {
createConversationAndInitModel(activeModel);
}
}
};
const createConversationAndInitModel = async (model: Product) => {
await requestCreateConvo(model);
await initModel(model);
};
return (
<div className="flex flex-col items-center py-10 gap-3">
<Image
@ -32,22 +60,11 @@ const SidebarEmptyHistory: React.FC = () => {
alt=""
/>
<div className="flex flex-col items-center gap-6">
<div>
<div className="text-center text-gray-900 text-sm">
No Chat History
</div>
<div className="text-center text-gray-900 text-sm">No Chat History</div>
<div className="text-center text-gray-500 text-sm">
Get started by creating a new chat.
</div>
</div>
<SidebarButton
callback={startChat}
className="flex items-center border bg-blue-600 rounded-lg py-[9px] pl-[15px] pr-[17px] gap-2 text-white font-medium text-sm"
height={14}
icon="icons/Icon_plus.svg"
title="New chat"
width={14}
/>
<PrimaryButton title={action} onClick={onClick} />
</div>
</div>
);

32
web/app/_components/SidebarFooter/index.tsx
View File

@ -1,27 +1,21 @@
import React from "react";
import { SidebarButton } from "../SidebarButton";
import SecondaryButton from "../SecondaryButton";
const SidebarFooter: React.FC = () => (
<div className="flex justify-between items-center gap-2">
<SidebarButton
className="flex items-center border border-gray-200 rounded-lg p-2 gap-3 flex-1 justify-center text-gray-900 font-medium text-sm"
height={24}
icon="icons/discord.svg"
title="Discord"
width={24}
callback={() => {
window.electronAPI?.openExternalUrl("https://discord.gg/AsJ8krTT3N");
}}
<SecondaryButton
title={"Discord"}
onClick={() =>
window.electronAPI?.openExternalUrl("https://discord.gg/AsJ8krTT3N")
}
className="flex-1"
/>
<SidebarButton
className="flex items-center border border-gray-200 rounded-lg p-2 gap-3 flex-1 justify-center text-gray-900 font-medium text-sm"
height={24}
icon="icons/unicorn_twitter.svg"
title="Twitter"
width={24}
callback={() => {
window.electronAPI?.openExternalUrl("https://twitter.com/jan_dotai");
}}
<SecondaryButton
title={"Discord"}
onClick={() =>
window.electronAPI?.openExternalUrl("https://twitter.com/jan_dotai")
}
className="flex-1"
/>
</div>
);

50
web/app/_components/SidebarMenu/index.tsx
View File

@ -1,15 +1,6 @@
import {
MainViewState,
getMainViewStateAtom,
setMainViewStateAtom,
} from "@/_helpers/JotaiWrapper";
import classNames from "classnames";
import { useAtomValue, useSetAtom } from "jotai";
import Image from "next/image";
const SidebarMenu: React.FC = () => {
const currentState = useAtomValue(getMainViewStateAtom);
const setMainViewState = useSetAtom(setMainViewStateAtom);
import React from "react";
import SidebarMenuItem from "../SidebarMenuItem";
import { MainViewState } from "@/_helpers/atoms/MainView.atom";
const menu = [
{
@ -29,41 +20,22 @@ const SidebarMenu: React.FC = () => {
},
];
const onMenuClick = (state: MainViewState) => {
if (state === currentState) return;
setMainViewState(state);
};
return (
const SidebarMenu: React.FC = () => (
<div className="flex flex-col">
<div className="text-gray-500 text-xs font-semibold py-2 pl-2 pr-3">
Your Configurations
</div>
<ul role="list" className="-mx-2 mt-2 space-y-1">
<ul role="list" className="-mx-2 mt-2 space-y-1 mb-2">
{menu.map((item) => (
<li key={item.name}>
<button
onClick={() => onMenuClick(item.state)}
className={classNames(
currentState === item.state
? "bg-gray-50 text-indigo-600"
: "text-gray-600 hover:text-indigo-600 hover:bg-gray-50",
"group flex gap-x-3 rounded-md text-base py-2 px-3 w-full"
)}
>
<Image
src={`icons/${item.icon}.svg`}
width={24}
height={24}
alt=""
<SidebarMenuItem
title={item.name}
viewState={item.state}
iconName={item.icon}
key={item.name}
/>
<span className="truncate">{item.name}</span>
</button>
</li>
))}
</ul>
</div>
);
};
export default SidebarMenu;
export default React.memo(SidebarMenu);

41
web/app/_components/SidebarMenuItem/index.tsx Normal file
View File

@ -0,0 +1,41 @@
import React from "react";
import { useAtomValue, useSetAtom } from "jotai";
import Image from "next/image";
import {
MainViewState,
getMainViewStateAtom,
setMainViewStateAtom,
} from "@/_helpers/atoms/MainView.atom";
type Props = {
title: string;
viewState: MainViewState;
iconName: string;
};
const SidebarMenuItem: React.FC<Props> = ({ title, viewState, iconName }) => {
const currentState = useAtomValue(getMainViewStateAtom);
const setMainViewState = useSetAtom(setMainViewStateAtom);
let className =
"text-gray-600 hover:text-indigo-600 hover:bg-gray-50 group flex gap-x-3 rounded-md text-base py-2 px-3 w-full";
if (currentState == viewState) {
className =
"bg-gray-100 text-indigo-600 group flex gap-x-3 rounded-md text-base py-2 px-3 w-full";
}
const onClick = () => {
setMainViewState(viewState);
};
return (
<li key={title}>
<button onClick={onClick} className={className}>
<Image src={`icons/${iconName}.svg`} width={24} height={24} alt="" />
<span className="truncate">{title}</span>
</button>
</li>
);
};
export default SidebarMenuItem;

22
web/app/_components/SimpleCheckbox/index.tsx Normal file
View File

@ -0,0 +1,22 @@
type Props = {
name: string;
};
const SimpleCheckbox: React.FC<Props> = ({ name }) => (
<div className="relative flex items-center gap-[11px]">
<div className="flex h-6 items-center">
<input
id="offers"
aria-describedby="offers-description"
name="offers"
type="checkbox"
className="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600"
/>
</div>
<div className="text-xs">
<label htmlFor="offers">{name}</label>
</div>
</div>
);
export default SimpleCheckbox;

89
web/app/_components/SimpleTag/index.tsx Normal file
View File

@ -0,0 +1,89 @@
import React from "react";
export enum TagType {
Roleplay = "Roleplay",
Llama = "Llama",
Story = "Story",
Casual = "Casual",
Professional = "Professional",
CodeLlama = "CodeLlama",
Coding = "Coding",
// Positive
Recommended = "Recommended",
Compatible = "Compatible",
// Neutral
SlowOnDevice = "This model will be slow on your device",
// Negative
InsufficientRam = "Insufficient RAM",
Incompatible = "Incompatible with your device",
TooLarge = "This model is too large for your device",
// Performance
Medium = "Medium",
BalancedQuality = "Balanced Quality",
}
const tagStyleMapper: Record<TagType, string> = {
[TagType.Roleplay]: "bg-red-100 text-red-800",
[TagType.Llama]: "bg-green-100 text-green-800",
[TagType.Story]: "bg-blue-100 text-blue-800",
[TagType.Casual]: "bg-yellow-100 text-yellow-800",
[TagType.Professional]: "text-indigo-800 bg-indigo-100",
[TagType.CodeLlama]: "bg-pink-100 text-pink-800",
[TagType.Coding]: "text-purple-800 bg-purple-100",
[TagType.Recommended]:
"text-green-700 ring-1 ring-inset ring-green-600/20 bg-green-50",
[TagType.Compatible]:
"bg-red-50 ext-red-700 ring-1 ring-inset ring-red-600/10",
[TagType.SlowOnDevice]:
"bg-yellow-50 text-yellow-800 ring-1 ring-inset ring-yellow-600/20",
[TagType.Incompatible]:
"bg-red-50 ext-red-700 ring-1 ring-inset ring-red-600/10",
[TagType.InsufficientRam]:
"bg-red-50 ext-red-700 ring-1 ring-inset ring-red-600/10",
[TagType.TooLarge]: "bg-red-50 ext-red-700 ring-1 ring-inset ring-red-600/10",
[TagType.Medium]: "bg-yellow-100 text-yellow-800",
[TagType.BalancedQuality]: "bg-yellow-100 text-yellow-800",
};
type Props = {
title: string;
type: TagType;
clickable?: boolean;
onClick?: () => void;
};
const SimpleTag: React.FC<Props> = ({
onClick,
clickable = true,
title,
type,
}) => {
if (!clickable) {
return (
<div
className={`px-[10px] py-0.5 rounded text-xs font-medium ${tagStyleMapper[type]}`}
>
{title}
</div>
);
}
return (
<button
onClick={onClick}
className={`px-[10px] py-0.5 rounded text-xs font-medium ${tagStyleMapper[type]}`}
>
{title} x
</button>
);
};
export default React.memo(SimpleTag);

2
web/app/_components/StreamTextMessage/index.tsx
View File

@ -4,7 +4,7 @@ import { TextCode } from "../TextCode";
import { getMessageCode } from "@/_utils/message";
import Image from "next/image";
import { useAtomValue } from "jotai";
import { currentStreamingMessageAtom } from "@/_helpers/JotaiWrapper";
import { currentStreamingMessageAtom } from "@/_helpers/atoms/ChatMessage.atom";
type Props = {
id: string;

2
web/app/_components/UserToolbar/index.tsx
View File

@ -1,6 +1,6 @@
"use client";
import { currentConversationAtom } from "@/_helpers/JotaiWrapper";
import { currentConversationAtom } from "@/_helpers/atoms/Conversation.atom";
import { useAtomValue } from "jotai";
import Image from "next/image";

17
web/app/_components/WelcomeContainer/index.tsx
View File

@ -1,7 +1,10 @@
import Image from "next/image";
import { SidebarButton } from "../SidebarButton";
import { useSetAtom } from "jotai";
import { MainViewState, setMainViewStateAtom } from "@/_helpers/JotaiWrapper";
import {
setMainViewStateAtom,
MainViewState,
} from "@/_helpers/atoms/MainView.atom";
import SecondaryButton from "../SecondaryButton";
const Welcome: React.FC = () => {
const setMainViewState = useSetAtom(setMainViewStateAtom);
@ -15,13 +18,9 @@ const Welcome: React.FC = () => {
<br />
let’s download your first model
</span>
<SidebarButton
callback={() => setMainViewState(MainViewState.ExploreModel)}
className="flex flex-row-reverse items-center rounded-lg gap-2 px-3 py-2 text-xs font-medium border border-gray-200"
icon={"icons/app_icon.svg"}
title="Explore models"
height={16}
width={16}
<SecondaryButton
title={"Explore models"}
onClick={() => setMainViewState(MainViewState.ExploreModel)}
/>
</div>
</div>

12
web/app/_helpers/EventListenerWrapper.tsx
View File

@ -1,15 +1,15 @@
"use client";
import { useAtom, useSetAtom } from "jotai";
import { useSetAtom } from "jotai";
import { ReactNode, useEffect } from "react";
import {
appDownloadProgress,
setDownloadStateAtom,
setDownloadStateSuccessAtom,
} from "./JotaiWrapper";
import { appDownloadProgress } from "./JotaiWrapper";
import { DownloadState } from "@/_models/DownloadState";
import { execute } from "../../../electron/core/plugin-manager/execution/extension-manager";
import { DataService } from "../../shared/coreService";
import {
setDownloadStateAtom,
setDownloadStateSuccessAtom,
} from "./atoms/DownloadState.atom";
type Props = {
children: ReactNode;

279
web/app/_helpers/JotaiWrapper.tsx
View File

@ -1,9 +1,5 @@
"use client";
import { ChatMessage, MessageStatus } from "@/_models/ChatMessage";
import { Conversation, ConversationState } from "@/_models/Conversation";
import { DownloadState } from "@/_models/DownloadState";
import { Product } from "@/_models/Product";
import { Provider, atom } from "jotai";
import { ReactNode } from "react";
@ -15,286 +11,11 @@ export default function JotaiWrapper({ children }: Props) {
return <Provider>{children}</Provider>;
}
const activeConversationIdAtom = atom<string | undefined>(undefined);
export const getActiveConvoIdAtom = atom((get) =>
get(activeConversationIdAtom)
);
export const setActiveConvoIdAtom = atom(
null,
(_get, set, convoId: string | undefined) => {
if (convoId) {
console.log(`set active convo id to ${convoId}`);
set(setMainViewStateAtom, MainViewState.Conversation);
}
set(activeConversationIdAtom, convoId);
}
);
export const currentPromptAtom = atom<string>("");
export const showingAdvancedPromptAtom = atom<boolean>(false);
export const showingProductDetailAtom = atom<boolean>(false);
export const showingMobilePaneAtom = atom<boolean>(false);
export const showingTyping = atom<boolean>(false);
export const appDownloadProgress = atom<number>(-1);
export const activeModel = atom<string | undefined>(undefined);
export const searchingModelText = atom<string>("");
/**
* Stores all conversations for the current user
*/
export const userConversationsAtom = atom<Conversation[]>([]);
export const currentConversationAtom = atom<Conversation | undefined>((get) =>
get(userConversationsAtom).find((c) => c.id === get(activeConversationIdAtom))
);
export const setConvoUpdatedAtAtom = atom(null, (get, set, convoId: string) => {
const convo = get(userConversationsAtom).find((c) => c.id === convoId);
if (!convo) return;
const newConvo: Conversation = {
...convo,
updated_at: new Date().toISOString(),
};
const newConversations: Conversation[] = get(userConversationsAtom).map((c) =>
c.id === convoId ? newConvo : c
);
set(userConversationsAtom, newConversations);
});
export const currentStreamingMessageAtom = atom<ChatMessage | undefined>(
undefined
);
export const setConvoLastImageAtom = atom(
null,
(get, set, convoId: string, lastImageUrl: string) => {
const convo = get(userConversationsAtom).find((c) => c.id === convoId);
if (!convo) return;
const newConvo: Conversation = { ...convo };
const newConversations: Conversation[] = get(userConversationsAtom).map(
(c) => (c.id === convoId ? newConvo : c)
);
set(userConversationsAtom, newConversations);
}
);
/**
* Stores all conversation states for the current user
*/
export const conversationStatesAtom = atom<Record<string, ConversationState>>(
{}
);
export const currentConvoStateAtom = atom<ConversationState | undefined>(
(get) => {
const activeConvoId = get(activeConversationIdAtom);
if (!activeConvoId) {
console.log("active convo id is undefined");
return undefined;
}
return get(conversationStatesAtom)[activeConvoId];
}
);
export const addNewConversationStateAtom = atom(
null,
(get, set, conversationId: string, state: ConversationState) => {
const currentState = { ...get(conversationStatesAtom) };
currentState[conversationId] = state;
set(conversationStatesAtom, currentState);
}
);
export const updateConversationWaitingForResponseAtom = atom(
null,
(get, set, conversationId: string, waitingForResponse: boolean) => {
const currentState = { ...get(conversationStatesAtom) };
currentState[conversationId] = {
...currentState[conversationId],
waitingForResponse,
};
set(conversationStatesAtom, currentState);
}
);
export const updateConversationHasMoreAtom = atom(
null,
(get, set, conversationId: string, hasMore: boolean) => {
const currentState = { ...get(conversationStatesAtom) };
currentState[conversationId] = { ...currentState[conversationId], hasMore };
set(conversationStatesAtom, currentState);
}
);
/**
* Stores all chat messages for all conversations
*/
export const chatMessages = atom<Record<string, ChatMessage[]>>({});
export const currentChatMessagesAtom = atom<ChatMessage[]>((get) => {
const activeConversationId = get(activeConversationIdAtom);
if (!activeConversationId) return [];
return get(chatMessages)[activeConversationId] ?? [];
});
export const addOldMessagesAtom = atom(
null,
(get, set, newMessages: ChatMessage[]) => {
const currentConvoId = get(activeConversationIdAtom);
if (!currentConvoId) return;
const currentMessages = get(chatMessages)[currentConvoId] ?? [];
const updatedMessages = [...currentMessages, ...newMessages];
const newData: Record<string, ChatMessage[]> = {
...get(chatMessages),
};
newData[currentConvoId] = updatedMessages;
set(chatMessages, newData);
}
);
export const addNewMessageAtom = atom(
null,
(get, set, newMessage: ChatMessage) => {
const currentConvoId = get(activeConversationIdAtom);
if (!currentConvoId) return;
const currentMessages = get(chatMessages)[currentConvoId] ?? [];
const updatedMessages = [newMessage, ...currentMessages];
const newData: Record<string, ChatMessage[]> = {
...get(chatMessages),
};
newData[currentConvoId] = updatedMessages;
set(chatMessages, newData);
}
);
export const deleteConversationMessage = atom(null, (get, set, id: string) => {
const newData: Record<string, ChatMessage[]> = {
...get(chatMessages),
};
newData[id] = [];
set(chatMessages, newData);
});
export const updateMessageAtom = atom(
null,
(get, set, id: string, conversationId: string, text: string) => {
const messages = get(chatMessages)[conversationId] ?? [];
const message = messages.find((e) => e.id === id);
if (message) {
message.text = text;
const updatedMessages = [...messages];
const newData: Record<string, ChatMessage[]> = {
...get(chatMessages),
};
newData[conversationId] = updatedMessages;
set(chatMessages, newData);
}
}
);
/**
* For updating the status of the last AI message that is pending
*/
export const updateLastMessageAsReadyAtom = atom(
null,
(get, set, id, text: string) => {
const currentConvoId = get(activeConversationIdAtom);
if (!currentConvoId) return;
const currentMessages = get(chatMessages)[currentConvoId] ?? [];
const messageToUpdate = currentMessages.find((e) => e.id === id);
// if message is not found, do nothing
if (!messageToUpdate) return;
const index = currentMessages.indexOf(messageToUpdate);
const updatedMsg: ChatMessage = {
...messageToUpdate,
status: MessageStatus.Ready,
text: text,
};
currentMessages[index] = updatedMsg;
const newData: Record<string, ChatMessage[]> = {
...get(chatMessages),
};
newData[currentConvoId] = currentMessages;
set(chatMessages, newData);
}
);
export const currentProductAtom = atom<Product | undefined>(undefined);
export const searchAtom = atom<string>("");
// modal atoms
export const showConfirmDeleteConversationModalAtom = atom(false);
export const showConfirmSignOutModalAtom = atom(false);
export const showConfirmDeleteModalAtom = atom(false);
export type FileDownloadStates = {
[key: string]: DownloadState;
};
// main view state
export enum MainViewState {
Welcome,
ExploreModel,
MyModel,
ResourceMonitor,
Setting,
Conversation,
}
const systemBarVisibilityAtom = atom<boolean>(true);
export const getSystemBarVisibilityAtom = atom((get) =>
get(systemBarVisibilityAtom)
);
const currentMainViewStateAtom = atom<MainViewState>(MainViewState.Welcome);
export const getMainViewStateAtom = atom((get) =>
get(currentMainViewStateAtom)
);
export const setMainViewStateAtom = atom(
null,
(_get, set, state: MainViewState) => {
if (state !== MainViewState.Conversation) {
set(activeConversationIdAtom, undefined);
}
const showSystemBar = state !== MainViewState.Conversation;
set(systemBarVisibilityAtom, showSystemBar);
set(currentMainViewStateAtom, state);
}
);
// download states
export const modelDownloadStateAtom = atom<FileDownloadStates>({});
export const setDownloadStateAtom = atom(
null,
(get, set, state: DownloadState) => {
const currentState = { ...get(modelDownloadStateAtom) };
console.debug(
`current download state for ${state.fileName} is ${JSON.stringify(state)}`
);
currentState[state.fileName] = state;
set(modelDownloadStateAtom, currentState);
}
);
export const setDownloadStateSuccessAtom = atom(
null,
(get, set, fileName: string) => {
const currentState = { ...get(modelDownloadStateAtom) };
const state = currentState[fileName];
if (!state) {
console.error(`Cannot find download state for ${fileName}`);
return;
}
delete currentState[fileName];
set(modelDownloadStateAtom, currentState);
}
);

109
web/app/_helpers/atoms/ChatMessage.atom.ts Normal file
View File

@ -0,0 +1,109 @@
import { ChatMessage, MessageStatus } from "@/_models/ChatMessage";
import { atom } from "jotai";
import { getActiveConvoIdAtom } from "./Conversation.atom";
/**
* Stores all chat messages for all conversations
*/
export const chatMessages = atom<Record<string, ChatMessage[]>>({});
export const currentChatMessagesAtom = atom<ChatMessage[]>((get) => {
const activeConversationId = get(getActiveConvoIdAtom);
if (!activeConversationId) return [];
return get(chatMessages)[activeConversationId] ?? [];
});
export const addOldMessagesAtom = atom(
null,
(get, set, newMessages: ChatMessage[]) => {
const currentConvoId = get(getActiveConvoIdAtom);
if (!currentConvoId) return;
const currentMessages = get(chatMessages)[currentConvoId] ?? [];
const updatedMessages = [...currentMessages, ...newMessages];
const newData: Record<string, ChatMessage[]> = {
...get(chatMessages),
};
newData[currentConvoId] = updatedMessages;
set(chatMessages, newData);
}
);
export const addNewMessageAtom = atom(
null,
(get, set, newMessage: ChatMessage) => {
const currentConvoId = get(getActiveConvoIdAtom);
if (!currentConvoId) return;
const currentMessages = get(chatMessages)[currentConvoId] ?? [];
const updatedMessages = [newMessage, ...currentMessages];
const newData: Record<string, ChatMessage[]> = {
...get(chatMessages),
};
newData[currentConvoId] = updatedMessages;
set(chatMessages, newData);
}
);
export const deleteConversationMessage = atom(null, (get, set, id: string) => {
const newData: Record<string, ChatMessage[]> = {
...get(chatMessages),
};
newData[id] = [];
set(chatMessages, newData);
});
export const updateMessageAtom = atom(
null,
(get, set, id: string, conversationId: string, text: string) => {
const messages = get(chatMessages)[conversationId] ?? [];
const message = messages.find((e) => e.id === id);
if (message) {
message.text = text;
const updatedMessages = [...messages];
const newData: Record<string, ChatMessage[]> = {
...get(chatMessages),
};
newData[conversationId] = updatedMessages;
set(chatMessages, newData);
}
}
);
/**
* For updating the status of the last AI message that is pending
*/
export const updateLastMessageAsReadyAtom = atom(
null,
(get, set, id, text: string) => {
const currentConvoId = get(getActiveConvoIdAtom);
if (!currentConvoId) return;
const currentMessages = get(chatMessages)[currentConvoId] ?? [];
const messageToUpdate = currentMessages.find((e) => e.id === id);
// if message is not found, do nothing
if (!messageToUpdate) return;
const index = currentMessages.indexOf(messageToUpdate);
const updatedMsg: ChatMessage = {
...messageToUpdate,
status: MessageStatus.Ready,
text: text,
};
currentMessages[index] = updatedMsg;
const newData: Record<string, ChatMessage[]> = {
...get(chatMessages),
};
newData[currentConvoId] = currentMessages;
set(chatMessages, newData);
}
);
export const currentStreamingMessageAtom = atom<ChatMessage | undefined>(
undefined
);

104
web/app/_helpers/atoms/Conversation.atom.ts Normal file
View File

@ -0,0 +1,104 @@
import { atom } from "jotai";
import { MainViewState, setMainViewStateAtom } from "./MainView.atom";
import { Conversation, ConversationState } from "@/_models/Conversation";
/**
* Stores the current active conversation id.
*/
const activeConversationIdAtom = atom<string | undefined>(undefined);
export const getActiveConvoIdAtom = atom((get) =>
get(activeConversationIdAtom)
);
export const setActiveConvoIdAtom = atom(
null,
(_get, set, convoId: string | undefined) => {
if (convoId) {
console.debug(`Set active conversation id: ${convoId}`);
set(setMainViewStateAtom, MainViewState.Conversation);
}
set(activeConversationIdAtom, convoId);
}
);
/**
* Stores all conversation states for the current user
*/
export const conversationStatesAtom = atom<Record<string, ConversationState>>(
{}
);
export const currentConvoStateAtom = atom<ConversationState | undefined>(
(get) => {
const activeConvoId = get(activeConversationIdAtom);
if (!activeConvoId) {
console.log("active convo id is undefined");
return undefined;
}
return get(conversationStatesAtom)[activeConvoId];
}
);
export const addNewConversationStateAtom = atom(
null,
(get, set, conversationId: string, state: ConversationState) => {
const currentState = { ...get(conversationStatesAtom) };
currentState[conversationId] = state;
set(conversationStatesAtom, currentState);
}
);
export const updateConversationWaitingForResponseAtom = atom(
null,
(get, set, conversationId: string, waitingForResponse: boolean) => {
const currentState = { ...get(conversationStatesAtom) };
currentState[conversationId] = {
...currentState[conversationId],
waitingForResponse,
};
set(conversationStatesAtom, currentState);
}
);
export const updateConversationHasMoreAtom = atom(
null,
(get, set, conversationId: string, hasMore: boolean) => {
const currentState = { ...get(conversationStatesAtom) };
currentState[conversationId] = { ...currentState[conversationId], hasMore };
set(conversationStatesAtom, currentState);
}
);
/**
* Stores all conversations for the current user
*/
export const userConversationsAtom = atom<Conversation[]>([]);
export const currentConversationAtom = atom<Conversation | undefined>((get) =>
get(userConversationsAtom).find((c) => c.id === get(getActiveConvoIdAtom))
);
export const setConvoUpdatedAtAtom = atom(null, (get, set, convoId: string) => {
const convo = get(userConversationsAtom).find((c) => c.id === convoId);
if (!convo) return;
const newConvo: Conversation = {
...convo,
updated_at: new Date().toISOString(),
};
const newConversations: Conversation[] = get(userConversationsAtom).map((c) =>
c.id === convoId ? newConvo : c
);
set(userConversationsAtom, newConversations);
});
export const setConvoLastImageAtom = atom(
null,
(get, set, convoId: string, lastImageUrl: string) => {
const convo = get(userConversationsAtom).find((c) => c.id === convoId);
if (!convo) return;
const newConvo: Conversation = { ...convo };
const newConversations: Conversation[] = get(userConversationsAtom).map(
(c) => (c.id === convoId ? newConvo : c)
);
set(userConversationsAtom, newConversations);
}
);

32
web/app/_helpers/atoms/DownloadState.atom.ts Normal file
View File

@ -0,0 +1,32 @@
import { DownloadState } from "@/_models/DownloadState";
import { atom } from "jotai";
// download states
export const modelDownloadStateAtom = atom<Record<string, DownloadState>>({});
export const setDownloadStateAtom = atom(
null,
(get, set, state: DownloadState) => {
const currentState = { ...get(modelDownloadStateAtom) };
console.debug(
`current download state for ${state.fileName} is ${JSON.stringify(state)}`
);
currentState[state.fileName] = state;
set(modelDownloadStateAtom, currentState);
}
);
export const setDownloadStateSuccessAtom = atom(
null,
(get, set, fileName: string) => {
const currentState = { ...get(modelDownloadStateAtom) };
const state = currentState[fileName];
if (!state) {
console.error(`Cannot find download state for ${fileName}`);
return;
}
delete currentState[fileName];
set(modelDownloadStateAtom, currentState);
}
);

54
web/app/_helpers/atoms/MainView.atom.ts Normal file
View File

@ -0,0 +1,54 @@
import { atom } from "jotai";
import { setActiveConvoIdAtom } from "./Conversation.atom";
import { systemBarVisibilityAtom } from "./SystemBar.atom";
export enum MainViewState {
Welcome,
ExploreModel,
MyModel,
ResourceMonitor,
Setting,
Conversation,
/**
* When user wants to create new conversation but haven't selected a model yet.
*/
ConversationEmptyModel,
}
/**
* Stores the current main view state. Default is Welcome.
*/
const currentMainViewStateAtom = atom<MainViewState>(MainViewState.Welcome);
/**
* Getter for current main view state.
*/
export const getMainViewStateAtom = atom((get) =>
get(currentMainViewStateAtom)
);
/**
* Setter for current main view state.
*/
export const setMainViewStateAtom = atom(
null,
(get, set, state: MainViewState) => {
// return if the state is already set
if (get(getMainViewStateAtom) === state) return;
if (state !== MainViewState.Conversation) {
// clear active conversation id if main view state is not Conversation
set(setActiveConvoIdAtom, undefined);
}
const showSystemBar =
state !== MainViewState.Conversation &&
state !== MainViewState.ConversationEmptyModel;
// show system bar if state is not Conversation nor ConversationEmptyModel
set(systemBarVisibilityAtom, showSystemBar);
set(currentMainViewStateAtom, state);
}
);

8
web/app/_helpers/atoms/Modal.atom.ts Normal file
View File

@ -0,0 +1,8 @@
import { atom } from "jotai";
export const showConfirmDeleteConversationModalAtom = atom(false);
export const showConfirmSignOutModalAtom = atom(false);
export const showConfirmDeleteModalAtom = atom(false);
export const showingAdvancedPromptAtom = atom<boolean>(false);
export const showingProductDetailAtom = atom<boolean>(false);
export const showingMobilePaneAtom = atom<boolean>(false);

6
web/app/_helpers/atoms/Model.atom.ts Normal file
View File

@ -0,0 +1,6 @@
import { Product } from "@/_models/Product";
import { atom } from "jotai";
export const currentProductAtom = atom<Product | undefined>(undefined);
export const selectedModelAtom = atom<Product | undefined>(undefined);

7
web/app/_helpers/atoms/SystemBar.atom.ts Normal file
View File

@ -0,0 +1,7 @@
import { atom } from "jotai";
export const systemBarVisibilityAtom = atom<boolean>(true);
export const getSystemBarVisibilityAtom = atom((get) =>
get(systemBarVisibilityAtom)
);

12
web/app/_hooks/useChatMessages.ts
View File

@ -1,14 +1,14 @@
import {
addOldMessagesAtom,
conversationStatesAtom,
currentConversationAtom,
updateConversationHasMoreAtom,
} from "@/_helpers/JotaiWrapper";
import { ChatMessage, RawMessage, toChatMessage } from "@/_models/ChatMessage";
import { executeSerial } from "@/_services/pluginService";
import { useAtomValue, useSetAtom } from "jotai";
import { useEffect, useState } from "react";
import { DataService } from "../../shared/coreService";
import { addOldMessagesAtom } from "@/_helpers/atoms/ChatMessage.atom";
import {
currentConversationAtom,
conversationStatesAtom,
updateConversationHasMoreAtom,
} from "@/_helpers/atoms/Conversation.atom";
/**
* Custom hooks to get chat messages for current(active) conversation

23
web/app/_hooks/useCreateConversation.ts
View File

@ -1,25 +1,22 @@
// import useGetCurrentUser from "./useGetCurrentUser";
import { useAtom, useSetAtom } from "jotai";
import {
activeModel,
addNewConversationStateAtom,
currentProductAtom,
setActiveConvoIdAtom,
userConversationsAtom,
} from "@/_helpers/JotaiWrapper";
import { Conversation } from "@/_models/Conversation";
import { executeSerial } from "@/_services/pluginService";
import { DataService, InfereceService } from "../../shared/coreService";
import { DataService } from "../../shared/coreService";
import { Product } from "@/_models/Product";
import {
userConversationsAtom,
setActiveConvoIdAtom,
addNewConversationStateAtom,
} from "@/_helpers/atoms/Conversation.atom";
import useInitModel from "./useInitModel";
const useCreateConversation = () => {
const { initModel } = useInitModel();
const [userConversations, setUserConversations] = useAtom(
userConversationsAtom
);
const setActiveConvoId = useSetAtom(setActiveConvoIdAtom);
const addNewConvoState = useSetAtom(addNewConversationStateAtom);
const setActiveModel = useSetAtom(activeModel);
const setActiveProduct = useSetAtom(currentProductAtom);
const requestCreateConvo = async (model: Product) => {
const conv: Conversation = {
@ -30,9 +27,7 @@ const useCreateConversation = () => {
name: "Conversation",
};
const id = await executeSerial(DataService.CREATE_CONVERSATION, conv);
await executeSerial(InfereceService.INIT_MODEL, model);
setActiveProduct(model);
setActiveModel(model.name);
await initModel(model);
const mappedConvo: Conversation = {
id,

20
web/app/_hooks/useDeleteConversation.ts
View File

@ -1,15 +1,17 @@
import {
currentPromptAtom,
deleteConversationMessage,
getActiveConvoIdAtom,
setActiveConvoIdAtom,
showingAdvancedPromptAtom,
showingProductDetailAtom,
userConversationsAtom,
} from "@/_helpers/JotaiWrapper";
import { currentPromptAtom } from "@/_helpers/JotaiWrapper";
import { execute } from "@/_services/pluginService";
import { useAtom, useAtomValue, useSetAtom } from "jotai";
import { DataService } from "../../shared/coreService";
import { deleteConversationMessage } from "@/_helpers/atoms/ChatMessage.atom";
import {
userConversationsAtom,
getActiveConvoIdAtom,
setActiveConvoIdAtom,
} from "@/_helpers/atoms/Conversation.atom";
import {
showingProductDetailAtom,
showingAdvancedPromptAtom,
} from "@/_helpers/atoms/Modal.atom";
export default function useDeleteConversation() {
const [userConversations, setUserConversations] = useAtom(

12
web/app/_hooks/useDeleteModel.ts Normal file
View File

@ -0,0 +1,12 @@
import { execute, executeSerial } from "@/_services/pluginService";
import { DataService, ModelManagementService } from "../../shared/coreService";
import { Product } from "@/_models/Product";
export default function useDeleteModel() {
const deleteModel = async (model: Product) => {
execute(DataService.DELETE_DOWNLOAD_MODEL, model.id);
await executeSerial(ModelManagementService.DELETE_MODEL, model.fileName);
};
return { deleteModel };
}

17
web/app/_hooks/useDownloadModel.ts Normal file
View File

@ -0,0 +1,17 @@
import { executeSerial } from "@/_services/pluginService";
import { DataService, ModelManagementService } from "../../shared/coreService";
import { Product } from "@/_models/Product";
export default function useDownloadModel() {
const downloadModel = async (model: Product) => {
await executeSerial(DataService.STORE_MODEL, model);
await executeSerial(ModelManagementService.DOWNLOAD_MODEL, {
downloadUrl: model.downloadUrl,
fileName: model.fileName,
});
};
return {
downloadModel,
};
}

54
web/app/_hooks/useGetAvailableModels.ts Normal file
View File

@ -0,0 +1,54 @@
import { Product } from "@/_models/Product";
import { executeSerial } from "@/_services/pluginService";
import { ModelManagementService } from "../../shared/coreService";
import { useEffect, useState } from "react";
import { getModelFiles } from "./useGetDownloadedModels";
import { useAtomValue } from "jotai";
import { modelDownloadStateAtom } from "@/_helpers/atoms/DownloadState.atom";
export default function useGetAvailableModels() {
const downloadState = useAtomValue(modelDownloadStateAtom);
const [allAvailableModels, setAllAvailableModels] = useState<Product[]>([]);
const [availableModels, setAvailableModels] = useState<Product[]>([]);
const [downloadedModels, setDownloadedModels] = useState<Product[]>([]);
const getAvailableModelExceptDownloaded = async () => {
const avails = await getAvailableModels();
const downloaded = await getModelFiles();
setAllAvailableModels(avails);
const availableOrDownloadingModels: Product[] = avails;
const successfullDownloadModels: Product[] = [];
downloaded.forEach((item) => {
if (item.fileName && downloadState[item.fileName] == null) {
// if not downloading, consider as downloaded
successfullDownloadModels.push(item);
} else {
availableOrDownloadingModels.push(item);
}
});
setAvailableModels(availableOrDownloadingModels);
setDownloadedModels(successfullDownloadModels);
};
useEffect(() => {
getAvailableModelExceptDownloaded();
}, []);
return {
allAvailableModels,
availableModels,
downloadedModels,
getAvailableModelExceptDownloaded,
};
}
export async function getAvailableModels(): Promise<Product[]> {
const avails: Product[] = await executeSerial(
ModelManagementService.GET_AVAILABLE_MODELS
);
return avails ?? [];
}

30
web/app/_hooks/useGetDownloadedModels.ts Normal file
View File

@ -0,0 +1,30 @@
import { Product } from "@/_models/Product";
import { useEffect, useState } from "react";
import { executeSerial } from "../../../electron/core/plugin-manager/execution/extension-manager";
import { DataService, ModelManagementService } from "../../shared/coreService";
export function useGetDownloadedModels() {
const [downloadedModels, setDownloadedModels] = useState<Product[]>([]);
useEffect(() => {
getDownloadedModels().then((downloadedModels) => {
setDownloadedModels(downloadedModels);
});
}, []);
return { downloadedModels };
}
export async function getDownloadedModels(): Promise<Product[]> {
const downloadedModels: Product[] = await executeSerial(
DataService.GET_FINISHED_DOWNLOAD_MODELS
);
return downloadedModels ?? [];
}
export async function getModelFiles(): Promise<Product[]> {
const downloadedModels: Product[] = await executeSerial(
ModelManagementService.GET_DOWNLOADED_MODELS
);
return downloadedModels ?? [];
}

6
web/app/_hooks/useGetUserConversations.ts
View File

@ -1,11 +1,11 @@
import { Conversation, ConversationState } from "@/_models/Conversation";
import { useSetAtom } from "jotai";
import { executeSerial } from "@/_services/pluginService";
import { DataService } from "../../shared/coreService";
import {
conversationStatesAtom,
userConversationsAtom,
} from "@/_helpers/JotaiWrapper";
import { executeSerial } from "@/_services/pluginService";
import { DataService } from "../../shared/coreService";
} from "@/_helpers/atoms/Conversation.atom";
const useGetUserConversations = () => {
const setConversationStates = useSetAtom(conversationStatesAtom);

25
web/app/_hooks/useInitModel.ts Normal file
View File

@ -0,0 +1,25 @@
import { Product } from "@/_models/Product";
import { executeSerial } from "@/_services/pluginService";
import { InfereceService } from "../../shared/coreService";
import { useAtom } from "jotai";
import { currentProductAtom } from "@/_helpers/atoms/Model.atom";
export default function useInitModel() {
const [activeModel, setActiveModel] = useAtom(currentProductAtom);
const initModel = async (model: Product) => {
if (activeModel && activeModel.id === model.id) {
console.debug(`Model ${model.id} is already init. Ignore..`);
return;
}
try {
await executeSerial(InfereceService.INIT_MODEL, model);
console.debug(`Init model ${model.name} successfully!`);
setActiveModel(model);
} catch (err) {
console.error(`Init model ${model.name} failed: ${err}`);
}
};
return { initModel };
}

26
web/app/_hooks/useSendChatMessage.ts
View File

@ -1,14 +1,4 @@
import {
addNewMessageAtom,
chatMessages,
currentConversationAtom,
currentPromptAtom,
currentStreamingMessageAtom,
getActiveConvoIdAtom,
showingTyping,
updateMessageAtom,
} from "@/_helpers/JotaiWrapper";
import { currentPromptAtom, showingTyping } from "@/_helpers/JotaiWrapper";
import { useAtom, useAtomValue, useSetAtom } from "jotai";
import { selectAtom } from "jotai/utils";
import { DataService, InfereceService } from "../../shared/coreService";
@ -19,6 +9,16 @@ import {
} from "@/_models/ChatMessage";
import { executeSerial } from "@/_services/pluginService";
import { useCallback } from "react";
import {
addNewMessageAtom,
updateMessageAtom,
chatMessages,
currentStreamingMessageAtom,
} from "@/_helpers/atoms/ChatMessage.atom";
import {
currentConversationAtom,
getActiveConvoIdAtom,
} from "@/_helpers/atoms/Conversation.atom";
export default function useSendChatMessage() {
const currentConvo = useAtomValue(currentConversationAtom);
@ -50,9 +50,9 @@ export default function useSendChatMessage() {
const newChatMessage = await toChatMessage(newMessage);
addNewMessage(newChatMessage);
const messageHistory = chatMessagesHistory ?? [];
const recentMessages = [
...chatMessagesHistory.sort((a, b) => parseInt(a.id) - parseInt(b.id)),
...messageHistory.sort((a, b) => parseInt(a.id) - parseInt(b.id)),
newChatMessage,
]
.slice(-10)

20
web/app/_hooks/useStartStopModel.ts Normal file
View File

@ -0,0 +1,20 @@
import { executeSerial } from "@/_services/pluginService";
import { DataService } from "../../shared/coreService";
import useInitModel from "./useInitModel";
export default function useStartStopModel() {
const { initModel } = useInitModel();
const startModel = async (modelId: string) => {
const model = await executeSerial(DataService.GET_MODEL_BY_ID, modelId);
if (!model) {
alert(`Model ${modelId} not found! Please re-download the model first.`);
} else {
await initModel(model);
}
};
const stopModel = async (modelId: string) => {};
return { startModel, stopModel };
}

6
web/app/_models/Product.ts
View File

@ -27,4 +27,10 @@ export interface Product {
updatedAt?: number;
fileName?: string;
downloadUrl?: string;
accelerated: boolean; // TODO: add this in the database
totalSize: number; // TODO: add this in the database
format: string; // TODO: add this in the database // GGUF or something else
status: string; // TODO: add this in the database // Downloaded, Active
releaseDate: number; // TODO: add this in the database
}

15
web/app/_utils/converter.ts Normal file
View File

@ -0,0 +1,15 @@
export const toGigabytes = (input: number) => {
if (input > 1024 ** 3) {
return (input / 1000 ** 3).toFixed(2) + "GB";
} else if (input > 1024 ** 2) {
return (input / 1000 ** 2).toFixed(2) + "MB";
} else if (input > 1024) {
return (input / 1000).toFixed(2) + "KB";
} else {
return input + "B";
}
};
export const formatDownloadPercentage = (input: number) => {
return (input * 100).toFixed(2) + "%";
};