Merge pull request #4 from mlx-chat/MLC-7

[MLC-7] repo: Move all app related items to /app

.github/workflows/lint.yml

@@ -16,7 +16,10 @@ jobs:
         uses: actions/setup-node@v1
         with:
           node-version: 16
+
       - name: Install App Deps
         run: npm i --ignore-scripts
+        working-directory: ./app
       - name: Lint App
+        working-directory: ./app
         run: npm run lint

.gitignore

@@ -1,22 +1,21 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
 # dependencies
-/node_modules
-/.pnp
+node_modules/
+.pnp/
 .pnp.js
 
 # testing
-/coverage
+coverage/
 
 # next.js
-/.next/
-/out/
+.next/
+out/
 
 # production
-/build
-/main/out
-/main/tailwind.css
-/dist
+build/
+app/main/tailwind.css
+dist/
 
 # misc
 .DS_Store
@@ -165,4 +164,4 @@ venv.bak/
 dmypy.json
 
 # Pyre type checker
-.pyre/
+.pyre/

.eslintrc.cjs → app/.eslintrc.cjs

@@ -239,10 +239,7 @@ module.exports = {
   ],
   parser: '@typescript-eslint/parser',
   parserOptions: {
-    ecmaVersion: 12,
-    project: ['./tsconfig.json'], // Specify it only for TypeScript files
-    sourceType: 'module',
-    tsconfigRootDir: __dirname,
+    project: './app/tsconfig.json',
   },
   plugins: [
     'react',

main/main.ts → app/main/main.ts

@@ -23,65 +23,76 @@ function handleSetTitle(event: any, title: string) {
 
 // Python Server
 export class ServerManager {
-    private serverProcess: any | null = null;
-
-    private findOpenPort(startingPort: number): Promise<number> {
-      return new Promise<number>((resolve) => {
-        const server = net.createServer();
-
-        server.listen(startingPort, () => {
-          const port = (server.address() as net.AddressInfo).port;
-          server.close(() => resolve(port));
-        });
-
-        server.on('error', (err: any) => err.code === 'EADDRINUSE' && resolve(this.findOpenPort(startingPort + 1)));
+  private serverProcess: any | null = null;
+
+  private findOpenPort(startingPort: number): Promise<number> {
+    return new Promise<number>((resolve) => {
+      const server = net.createServer();
+
+      server.listen(startingPort, () => {
+        const port = (server.address() as net.AddressInfo).port;
+        server.close(() => resolve(port));
       });
-    }
-
-    private runPythonServer(model: string, port: number): any {
-      const args = [`--model ${model}`, '--host 127.0.0.1', `--port ${port}`];
-      const modifiedArgs = args.flatMap(arg => arg.split(/\s+/));
-
-      const pythonProcess = spawn('python', ['-m', 'server.server', ...modifiedArgs]);
-      pythonProcess.stdout.on('data', (data: Buffer) => console.log("Server output:", data.toString('utf8')));
-      pythonProcess.stderr.on('data', (data: Buffer) => console.log(`Server error: ${data.toString('utf8')}`));
-
-      return pythonProcess;
-    }
-
-    start(model: string): Promise<void> {
-      return new Promise<void>((resolve, reject) => {
-        this.stop();
-
-        this.findOpenPort(8080).then((port) => {
-          console.log(`Starting server for model: ${model} on port: ${port}`);
-          this.serverProcess = this.runPythonServer(model, port);
-
-          this.serverProcess.on('close', (code: number | null) => {
-            console.log(`Server process exited with code ${code}`);
-            this.serverProcess = null;
-          });
-
-          this.serverProcess.on('error', (err: any) => {
-            console.error(`Error in server process: ${err}`);
-            this.serverProcess = null;
-            reject(err);
-          });
-
-          resolve();
+
+      server.on(
+        'error',
+        (err: any) => err.code === 'EADDRINUSE' && resolve(this.findOpenPort(startingPort + 1)),
+      );
+    });
+  }
+
+  private runPythonServer(model: string, port: number): any {
+    const args = [`--model ${model}`, '--host 127.0.0.1', `--port ${port}`];
+    const modifiedArgs = args.flatMap(arg => arg.split(/\s+/));
+
+    const pythonProcess = spawn('python', ['-m', 'server.server', ...modifiedArgs], {
+      cwd: '../',
+    });
+    pythonProcess.stdout.on(
+      'data',
+      (data: Buffer) => console.log('Server output:', data.toString('utf8')),
+    );
+    pythonProcess.stderr.on(
+      'data',
+      (data: Buffer) => console.log(`Server error: ${data.toString('utf8')}`),
+    );
+
+    return pythonProcess;
+  }
+
+  start(model: string): Promise<void> {
+    return new Promise<void>((resolve, reject) => {
+      this.stop();
+
+      this.findOpenPort(8080).then((port) => {
+        console.log(`Starting server for model: ${model} on port: ${port}`);
+        this.serverProcess = this.runPythonServer(model, port);
+
+        this.serverProcess.on('close', (code: number | null) => {
+          console.log(`Server process exited with code ${code}`);
+          this.serverProcess = null;
         });
+
+        this.serverProcess.on('error', (err: any) => {
+          console.error(`Error in server process: ${err}`);
+          this.serverProcess = null;
+          reject(err);
+        });
+
+        resolve();
       });
-    }
-
-    stop(): void {
-      if (this.serverProcess) {
-        console.log('Stopping the server...');
-        this.serverProcess.kill();
-        this.serverProcess = null;
-      }
+    });
+  }
+
+  stop(): void {
+    if (this.serverProcess) {
+      console.log('Stopping the server...');
+      this.serverProcess.kill();
+      this.serverProcess = null;
     }
   }
-
+}
+
 // Loading Screen
 let splash: BrowserWindow | null;
 const createSplashScreen = () => {
@@ -164,7 +175,7 @@ app.whenReady().then(() => {
       .then(() => console.log('Server started successfully'))
       .catch(error => console.error('Error starting server:', error));
   });
-  
+
   createSplashScreen();
 
   // createWindow();

src/app/page.tsx → app/src/app/page.tsx

@@ -1,7 +1,6 @@
 'use client';
 
 import React, {
-  useCallback,
   useEffect,
   useState,
 } from 'react';
@@ -24,25 +23,25 @@ import {
 export default function Home() {
   const [selectedDirectory, setSelectedDirectory] = useState<string | null>(null);
   const [message, setMessage] = useState<string | null>(null);
-  const [chatHistory, setChatHistory] = useState<{ role: string; content: any }[]>([]);
+  const [chatHistory, setChatHistory] = useState<{ role: string; content: string | null; }[]>([]);
   const [selectedModel, setSelectedModel] = useState<string | null>(null);
 
   function handleOpen() {
-    if (typeof window !== 'undefined' && global?.window) {
+    if (typeof window !== 'undefined') {
       window.electronAPI.selectDirectory();
     }
   }
 
   useEffect(() => {
-    window.electronAPI.onSelectDirectory(customData => {
+    window.electronAPI.onSelectDirectory((customData) => {
       setSelectedDirectory(customData[0]);
     });
   }, []);
 
-  const handleModelChange = (selectedModel: string | null) => {
-    setSelectedModel(selectedModel);
-    if (typeof window !== 'undefined' && global?.window && selectedModel) {
-      window.electronAPI.startServer(selectedModel);
+  const handleModelChange = (model: string | null) => {
+    setSelectedModel(model);
+    if (typeof window !== 'undefined' && model) {
+      window.electronAPI.startServer(model);
     }
   };
 
@@ -63,13 +62,13 @@ export default function Home() {
           body: JSON.stringify({
             messages: newHistory,
             temperature: 0.0,
-            max_tokens: 10,
+            // eslint-disable-next-line @typescript-eslint/naming-convention
+            max_tokens: 100,
           }),
         });
 
         const responseData = await response.json();
         const assistantResponse = responseData.choices[0].message.content;
-        console.log(assistantResponse);
 
         setChatHistory([
           ...newHistory,
@@ -78,9 +77,9 @@ export default function Home() {
 
         setMessage('');
       } catch (error) {
+        // eslint-disable-next-line no-console
         console.error('Error fetching data:', error);
       }
-      console.log(chatHistory);
     }
   };
 
@@ -124,19 +123,32 @@ export default function Home() {
         </div>
       </div>
       <div className='flex-grow min-w-full bg-slate-100 rounded-sm dark:bg-zinc-900 border flex'>
-        {chatHistory.length ? (<div className='flex flex-col flex-grow gap-4 p-4'>
-          {chatHistory.map((chat, index) => (
-            <div key={index} className={`flex ${chat.role === 'user' ? 'justify-end' : 'justify-start'}`}>
-              <div className={`p-4 rounded-sm ${chat.role === 'user' ? 'bg-slate-200 dark:bg-zinc-800' : 'bg-slate-300 dark:bg-zinc-700'}`}>
-                <p>{chat.content}</p>
-              </div>
+        {chatHistory.length
+          ? (
+            <div className='flex flex-col flex-grow gap-4 p-4'>
+              {chatHistory.map((chat, index) => (
+                <div
+                  key={index}
+                  className={`flex ${chat.role === 'user' ? 'justify-end' : 'justify-start'}`}
+                >
+                  <div
+                    className={`p-4 rounded-sm ${
+                      chat.role === 'user'
+                        ? 'bg-slate-200 dark:bg-zinc-800'
+                        : 'bg-slate-300 dark:bg-zinc-700'
+                    }`}
+                  >
+                    <p>{chat.content}</p>
+                  </div>
+                </div>
+              ))}
             </div>
-          ))}
-        </div>) : (
-          <div className='flex justify-center items-center min-h-full align-middle flex-grow'>
-            <h1 className='text-md text-zinc-500 dark:text-zinc-500'>No messages yet</h1>
-          </div>
-        )}
+          )
+          : (
+            <div className='flex justify-center items-center min-h-full align-middle flex-grow'>
+              <h1 className='text-md text-zinc-500 dark:text-zinc-500'>No messages yet</h1>
+            </div>
+          )}
       </div>
       <div className='flex justify-center'>
         <Input
@@ -148,4 +160,4 @@ export default function Home() {
       </div>
     </main>
   );
-}
+}

tsconfig.json → app/tsconfig.json

@@ -38,6 +38,7 @@
     "main/preload.ts",
     "main/main.ts",
     "out/types/**/*.ts",
+    ".eslintrc.cjs",
   ],
   "exclude": [
     "node_modules",