initChatBookSetting

chatbookai · Jun 1, 2024 · fd63b33 · fd63b33
1 parent fc663be
commit fd63b33
Show file tree

Hide file tree

Showing 5 changed files with 245 additions and 10 deletions.
diff --git a/express/main.js b/express/main.js
@@ -1,11 +1,14 @@
-import { app, BrowserWindow } from 'electron';
+import { app, BrowserWindow, Menu, ipcMain, dialog } from 'electron';
 import isDev from 'electron-is-dev'
+import settings from 'electron-settings';
+
 import { server, getPort } from './src/app.js';
+import { initChatBookSetting, initChatBookDb } from './src/utils/db.js';
 
 const PORT = getPort();
 
-
 let mainWindow;
+let ChatBookSetting;
 
 function createMainWindow() {
   mainWindow = new BrowserWindow({
@@ -17,8 +20,40 @@ function createMainWindow() {
     },
   });
 
-  mainWindow.loadURL('http://localhost:' + PORT);
+  //Start Setting Page
+  mainWindow.loadFile('src/settings/index.html');
+
+  ipcMain.on('start-chatbook', async (event, data) => {
+    ChatBookSetting = await settings.get('chatbook');
+    console.log("ChatBookSetting main.js", ChatBookSetting)
+    await initChatBookSetting(ChatBookSetting);
+    await initChatBookDb();
+    mainWindow.loadURL('http://localhost:' + PORT);
+  });
 
+  const template = [
+    {
+      label: 'About',
+      submenu: [
+        {
+          label: 'Website',
+          click: () => {
+            openNewURL('https://chatbookai.net/');
+          }
+        },
+        {
+          label: 'Github',
+          click: () => {
+            openNewURL('https://github.com/chatbookai/ChatBook');
+          }
+        }
+      ]
+    }
+  ];
+
+  const menu = Menu.buildFromTemplate(template);
+  Menu.setApplicationMenu(menu);
+
   if (isDev) {
     mainWindow.webContents.openDevTools();
   }
@@ -29,6 +64,11 @@ function createMainWindow() {
   });
 }
 
+function openNewURL(url) {
+  const newWindow = new BrowserWindow({ width: 800, height: 600 });
+  newWindow.loadURL(url);
+}
+
 app.whenReady().then(()=>{
   createMainWindow();
 });
@@ -45,3 +85,24 @@ app.on('window-all-closed', () => {
     app.quit();
   }
 });
+
+ipcMain.on('open-folder-dialog', async (event) => {
+  const result = await dialog.showOpenDialog(mainWindow, {
+    properties: ['openDirectory'],
+  });
+  if (!result.canceled && result.filePaths.length > 0) {
+    event.reply('selected-folder', result.filePaths[0]);
+  }
+});
+
+ipcMain.on('save-chatbook', async (event, data) => {
+  await settings.set('chatbook', data);
+  console.log("save-chatbook", data);
+  //mainWindow.webContents.send('data-chatbook', data);
+});
+
+ipcMain.on('get-chatbook', async (event) => {
+  const data = await settings.get('chatbook');
+  console.log("get-chatbook", data);
+  event.reply('data-chatbook', data);
+});
diff --git a/express/src/settings/index.html b/express/src/settings/index.html
@@ -0,0 +1,161 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>ChatBook AI</title>
+  <style>
+    body {
+      font-family: Arial, sans-serif;
+      text-align: center;
+      padding: 20px;
+    }
+    h1 {
+      color: #333;
+    }
+    .buttonSave {
+      background-color: #8649f9;
+      color: white;
+      padding: 10px 20px;
+      font-size: 16px;
+      cursor: pointer;
+      border: none;
+      border-radius: 5px;
+    }
+    .buttonSave:hover {
+      background-color: rgb(131, 66, 252)
+    }
+    .buttonStart {
+      background-color: rgb(22, 177, 255);
+      color: white;
+      padding: 10px 20px;
+      font-size: 16px;
+      cursor: pointer;
+      border: none;
+      border-radius: 5px;
+    }
+    .buttonStart:hover {
+      background-color: rgb(9, 169, 249);
+    }
+    label {
+      display: block;
+      margin: 10px 0;
+    }
+    input {
+      width: 100%;
+      padding: 8px;
+      margin: 5px 0;
+      box-sizing: border-box;
+    }
+    .flex-container {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: space-between;
+    }
+    .flex-item-left {
+      width: 35%; /* Adjust the width as needed */
+      margin-bottom: 10px;
+    }
+    .flex-item-right {
+      width: 65%; /* Adjust the width as needed */
+      margin-bottom: 10px;
+      text-align: left;
+    }
+  </style>
+  <link rel="stylesheet" href="notyf.min.css">
+  <script src="notyf.min.js"></script>
+
+</head>
+
+<body>
+  <h1>ChatBook AI</h1>
+
+  <div class="flex-container">
+    <div class="flex-item-left">
+      <label for="Choose Folder">Choose Folder:</label>
+    </div>
+    <div class="flex-item-right">
+      <button onclick="openFolderDialog()" class='buttonSave'>Choose Folder</button>
+    </div>
+
+    <div class="flex-item-left">
+      <label for="Selected Folder">Selected Folder:</label>
+    </div>
+    <div class="flex-item-right">
+      <input type="text" id="NodeStorageDirectory" placeholder="Pls choose a folder as the data dir" readonly disabled>
+    </div>
+
+    <!--
+    <div class="flex-item-left">
+      <label for="Your Node Name">Your Node Name:</label>
+    </div>
+    <div class="flex-item-right">
+      <input type="text" id="Enter node name" placeholder="Enter node name" value='ChatBook AI'>
+    </div>
+    -->
+
+  </div>
+
+  <button class='buttonSave' onclick="saveData()">Save Settings</button>
+  <button class='buttonStart' onclick="startChatBook()">Start ChatBook AI</button>
+
+  <script>
+    const { ipcRenderer } = require('electron');
+    const fs = require('fs');
+    const os = require('os');
+
+    function openFolderDialog() {
+      ipcRenderer.send('open-folder-dialog');
+    }
+
+    ipcRenderer.on('selected-folder', (event, folderPath) => {
+      document.getElementById('NodeStorageDirectory').value = folderPath;
+    });
+
+    function startChatBook() {
+      const NodeStorageDirectory = document.getElementById('NodeStorageDirectory').value || '';
+      if (!NodeStorageDirectory || NodeStorageDirectory=='') {
+        const notyf = new Notyf({ position: { x: 'right', y: 'top' } });
+        notyf.error('data folder must be filled!');
+        return;
+      }
+      ipcRenderer.send('start-chatbook');
+    }
+
+    function saveData() {
+      //const NodeName = document.getElementById('NodeName').value;
+      const NodeStorageDirectory = document.getElementById('NodeStorageDirectory').value || '';
+
+      //if (!NodeName || NodeName=='') {
+      //  const notyf = new Notyf({ position: { x: 'right', y: 'top' } });
+      //  notyf.error('Node Name must be filled!');
+      //  return;
+      //}
+
+      if (!NodeStorageDirectory || NodeStorageDirectory=='') {
+        const notyf = new Notyf({ position: { x: 'right', y: 'top' } });
+        notyf.error('data folder must be filled!');
+        return;
+      }
+
+      ipcRenderer.send('save-chatbook', { NodeStorageDirectory });
+
+      const notyf = new Notyf({ position: { x: 'right', y: 'top' } });
+      notyf.success('Setting saved successfully!');
+    }
+
+    function loadData() {
+      ipcRenderer.send('get-chatbook');
+    }
+
+    ipcRenderer.on('data-chatbook', (event, data) => {
+      //document.getElementById('NodeName').value = data?.NodeName ?? 'ChatBook AI';
+      document.getElementById('NodeStorageDirectory').value = data?.NodeStorageDirectory ?? '';
+    });
+
+    document.addEventListener('DOMContentLoaded', () => {
+      loadData();
+    });
+  </script>
+</body>
+</html>
diff --git a/express/src/settings/notyf.min.css b/express/src/settings/notyf.min.css
diff --git a/express/src/settings/notyf.min.js b/express/src/settings/notyf.min.js